圆角边框 & 盒子阴影 & 文字阴影

---

圆角边框

在css3中，新增了圆角边框样式，使盒子可以变为圆角了。

1. 语法：border-radius:length。
2. 数值可以为px或百分比形式。
3. 数值可以有四个值，分别代表左上角、右上角、右下角、左下角。
4. 只设置某个角：border-top-left-radius / border-bottom-right-radius。
5. 也可以：10px，0，0，0。

上案例~~~

<style>
      .box {
        width: 200px;
        height: 200px;
        background-color: #6cf;
      }
​
      /* 画圆形：前提条件，这个盒子必须是正方形 */
      .box2 {
        width: 200px;
        height: 200px;
        background-color: #6cf;
        /* bdrd */
        /* 50% */
        border-radius: 50%;
        /* 边长的一半 */
        border-radius: 100px;
      }
​
      /* 胶囊形状:前提条件，盒子必须为长方形，bdrd设置高度的一半  */
      .box3 {
        width: 200px;
        height: 100px;
        background-color: #6cf;
        /* bdrd 设置高度的一半 变成胶囊形状 */
        border-radius: 50px;
      }
      .box4 {
        width: 300px;
        height: 350px;
        margin-top: 40px;
        background-color: yellow;
        border-radius: 20px 200px;
      }
    </style>

盒子阴影

css3中新增盒子阴影

语法：box-shadow: h-shadow v-shadow blur spread .......

值	描述
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊距离，调整虚实
spread	可选，阴影尺寸
color	可选，阴影颜色
outset	可选，默认outset,可改为内部阴影inset

上案例~~~

<style>
      * {
        margin: 0;
        padding: 0;
      }
​
      .box {
        width: 200px;
        height: 200px;
        margin: 100px;
        background-color: #0a0;
   /* 
        盒子阴影
    box-shadow: 水平偏移 垂直偏移 模糊程度 阴影尺寸 阴影颜色 内外阴影(inset);
    box-shadow: 水平偏移 垂直偏移 模糊程度 颜色;
    box-shadow: 0 0 0 #000;
    浏览器调试工具-> 阴影编辑器 -> 调试
    */
     /* 
        盒子阴影怎么设置 box-shadow: 0 0 rgba(0,0,0,0.4)
        必须属性：是前两个
​
        注意点：默认盒子阴影就是外部阴影，outset不要写在属性值中
     */
​
        box-shadow: 11px 7px 10px 1px rgb(0 0 0 / 50%);
      }
    </style>

文字阴影

css3中新增文字阴影

语法：text-shadow: h-shadow v-shadow blur color

值	描述
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊距离，调整虚实
color	可选，阴影颜色

上案例~~~

<style>
      body {
        background-color: #000;
      }
​
      .ys {
        color: #ccc;
        font-size: 100px;
        /* text-shadow: 水平 垂直 模糊程度 颜色; */
      }
​
      .ys:hover {
        color: #fff;
      }
​
      /* 
      了解：第一个值(x轴偏移量) 第二个值(y轴偏移量) 第三个值(模糊程度) 第四个值(阴影的颜色)
        */
      .ys {
        text-shadow: 9px 11px 10px rgba(255, 255, 255, 0.4);
      }
    </style>