CSS 一个DIV有四条边,怎么让只有下面一条边有阴影? 用css给div的border设置阴影、只要上、下、左有,右...

CSS \u5982\u4f55\u5b9e\u73b0\u8ba9div\u7684\u56db\u4e2a\u8fb9\u6846\u90fd\u6709\u9634\u5f71\u7684\u6548\u679c\uff1f

css\u600e\u4e48\u7ed94\u4e2a\u8fb9\u6846\u6dfb\u52a0\u9634\u5f71

span{ box-shadow: 2px 4px 6px #000; }
\u767e\u5ea6\u77e5\u9053\u201ccss\u600e\u4e48\u7ed94\u4e2a\u8fb9\u6846\u6dfb\u52a0\u9634\u5f71\u201d
\u7b80\u5355\u7684\u89e3\u91ca\u4e00\u4e0b\u76f8\u5173\u7684\u4ee3\u7801\u5c5e\u6027
box-shadow: 2px 4px 6px #000
\u9996\u51482px : \u8868\u793a\u6c34\u5e73\u9634\u5f71\u7684\u4f4d\u7f6e\uff0c\u7136\u540e4px : \u8868\u793a\u5782\u76f4\u9634\u5f71\u7684\u4f4d\u7f6e\uff0c\u63a5\u77405px : \u8868\u793a\u6a21\u7cca\u8ddd\u79bb\uff0c\u6700\u540e#000 \uff1a \u8868\u793a\u9634\u5f71\u7684\u989c\u8272\uff08#000 \u9ed1\u8272\uff09

\u62d3\u5c55\u8d44\u6599\uff1a
\u5c42\u53e0\u6837\u5f0f\u8868(\u82f1\u6587\u5168\u79f0\uff1aCascading Style Sheets)\u662f\u4e00\u79cd\u7528\u6765\u8868\u73b0HTML\uff08\u6807\u51c6\u901a\u7528\u6807\u8bb0\u8bed\u8a00\u7684\u4e00\u4e2a\u5e94\u7528\uff09\u6216XML\uff08\u6807\u51c6\u901a\u7528\u6807\u8bb0\u8bed\u8a00\u7684\u4e00\u4e2a\u5b50\u96c6\uff09\u7b49\u6587\u4ef6\u6837\u5f0f\u7684\u8ba1\u7b97\u673a\u8bed\u8a00\u3002CSS\u4e0d\u4ec5\u53ef\u4ee5\u9759\u6001\u5730\u4fee\u9970\u7f51\u9875\uff0c\u8fd8\u53ef\u4ee5\u914d\u5408\u5404\u79cd\u811a\u672c\u8bed\u8a00\u52a8\u6001\u5730\u5bf9\u7f51\u9875\u5404\u5143\u7d20\u8fdb\u884c\u683c\u5f0f\u5316\u3002
\u53c2\u8003\u8d44\u6599\uff1a\u767e\u5ea6\u767e\u79d1-CSS


需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<style>标签中,输入css代码:

div{width: 250px;height: 100px;border: 5px solid blue;box-shadow: 0px 20px 20px -20px #5E5E5E;}

3、浏览器运行index.html页面,此时只有div底部的边有阴影效果。



0px 不能简写成0!

box-shadow:0px 10px 5px #000;

介绍
0px 阴影向右偏移量,为0
10px 阴影向下偏移量,为10px
5px 阴影的过渡距离,为5px
#000阴影颜色,为黑色

给你一个DEMO

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#div1{width:100px; height:100px; background:green; box-shadow:0 10px 5px #000}
</style>
<body>
<div id="div1"></div>

只能你在下面再写个DIV,然后给那个DIV高设成1px;写个阴影

你需要有一个宽度一样的div套在外面,用overflow:hidden;
高度,你自己微调一下

box-shadow:0px 15px 10px -15px #ccc;

扩展阅读:div css布局完整代码 ... css样式代码大全 ... css两个div上下距离 ... css怎么让两个div在一排 ... html+css网页制作成品 ... css div布局效果图 ... css鼠标移入显示另一个div ... div css网页布局实例 ... 网页设计css代码大全 ...

本站交流只代表网友个人观点,与本站立场无关
欢迎反馈与建议,请联系电邮
2024© 车视网