阴影：
box-shadow:1 2 3 4 5 6
从左到右参数依次为：
水平偏移量：正数为右阴影，负数为左阴影 0为四周都有阴影没有偏移
垂直偏移量：正数为底部阴影，负数为顶部阴影 0为四周都有阴影没有偏移
阴影模糊距离：正数为扩大，0为无模糊效果
阴影扩展半径：正数扩大，负数缩小（一般不用）
阴影的颜色：随便什么颜色
阴影类型：默认外阴影，若想设置内阴影：inset
例1：（解释：此为水平方向没有偏移，竖直方向向下偏移4个像素，阴影模糊距离为8个像素，没有扩展半径，阴影颜色为rgba(0, 0, 0, 0.2)，默认外阴影。）
阴影.png
例2：（解释：此为水平方向没有偏移，竖直方向没有偏移，阴影模糊距离为2个像素，扩展半径为1个像素，阴影颜色为rgba(0, 140, 186, 0.5)，默认外阴影。）
四周阴影.png
关于圆角的设置
border-radius:左上 右上 右下 左下
border-radius:左上 右上左下 右下
border-radius:左上右下 右上左下 ·
1、边框（border） div{ border-radius； /*圆角*/ box-shadow；...
阴影：box-shadow:1 2 3 4 5 6从左到右参数依次为：水平偏移量：正数为右阴影，负数为左阴影 0为...
CSS3边框 圆角边框：border-radius 边框阴影：box-shadow语法：box-shadow: h...
边框 border-radius - 圆角边框 box-shadow - 边框阴影 border-image - ...
边框 border-radius ---边框倒角 box-shadow ----边框阴影 border-imag...
如果为元素设置了box-shadow属性，此时border-radius也会应用到box-shadow属性 使用b...
CSS3 border-radius设置圆角 box-shadow设置阴影 transition动画 transi...
参考来自：圆角效果(border-radius)、阴影(box-shadow)、边框应用图片(border-ima...
CSS3边框border-radius box-shadow border-image CSS3背景backg...
border-radius 设置边框圆角 border-image 用图片作为边框的修饰 box-shadow 边...
本文标题：笔记：box-shadow和 border-radius
本文链接：https://www.haomeiwen.com/subject/ipuajctx.html
网友评论