圆角和阴影

1.圆角border-radius:

允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形,当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。

属性是一个 简写属性,是为了将这四个属性
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius 简写为一个属性。

当表格元素的 border-collapse 为collapse时border-radius 不会生效。

矩形圆角#div{
background:red;
width:200px;
height:100px;
border-radius:20px;
}

2.设置阴影box-shadow

box-shadow使用一个或多个投影,如果使用多个投影时必须需要用逗号“,”分开。

对象选择器 {box-shadow:inset x-offset y-offset blur-radius spread-radius color}

对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}

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

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

推荐阅读更多精彩内容