CSS3的边框(四)

三、边框阴影

设置边框阴影box-shadow不会影响盒子的布局,即不会影响其兄弟元素的布局

spread可以与blur、h-shadow、v-shadow相互抵消,blur不可为负值

可以设置多重边框阴影,实现更好的效果,增强立体感。

语法:box-shadow:offset-x offset-y blur spresd color position;

属性值说明:

offset-x,offset-y指的是元素水平偏移量;

blur:表示阴影的模糊半径;

spread:阴影尺寸(从元素到阴影的距离),正值会在元素的各个方向按指定的数值延伸阴影,负值会使阴影收缩的比本身元素的尺寸还小。

color:阴影的颜色值;

position:可选,表示阴影的位置,默认值是外部阴影,关键字inset指的是内部阴影。

Document

div{

width: 100px;

height: 50px;

background: yellowgreen;

-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */

box-shadow: 10px 10px 5px #888888;

}

实现效果如下:

box-shadow属性还可以设置多重边框

Document

div {

width: 100px;

height: 60px;

margin: 25px;

background: yellowgreen;

box-shadow: 0 0 0 10px #655,

0 0 0 15px deeppink,

0 2px 5px 15px rgba(0,0,0,.6);

}  box-shadow: 10px 10px 5px #888888;

}

运行结果如下图:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着HTML5和CSS...
    arlene112阅读 6,705评论 0 1
  • 我对任何美的东西都会本能地生出一种爱,在CSS的世界里,凡和色彩渐变等沾边的属性都是我的菜。因此box-shado...
    张歆琳阅读 11,658评论 6 33
  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 8,375评论 0 11
  • 话题背景:如今网页展示的姿势是这样的 图片来自:设计之家 炫酷的网页展示,支撑它的正是强大的CSS3,还有什么理由...
    aliensq阅读 6,243评论 0 2
  • 还记得儿时的记忆吗? 过年是最值得期待日子 最欢乐的时光 没有手机,没有网络 吃完年夜饭 一家人围坐在电视机旁 嘻...
    星辰流云阅读 1,306评论 0 0