12.圆角边框和阴影

12.圆角边框和阴影

1.圆角边框

css3中新增了圆角边框样式，border-radius属性用于设置元素的外边框圆角

border-radius:length;  /*radius半径（圆的半径）原理:(椭)圆与边框的交集形成圆角效果*/

.box {
    width:200px;
    height:200px;
    background-color:blue;
    border-radius:100px;
    /*50%就是宽度和高度的一半*/
    /*border-radius：50%*/
}

2.盒子阴影

css3中新增了盒子阴影，可以使用box-shadow属性为盒子添加阴影

box-shadow: h-shadow v-shadow blur spread color inset;

div{
    width:200px;
    height:200px;
    background-color:blue;
    margin:100px auto;
    box-shadow:10px 10px 10px -4px rgba(0,0,0,.3);
}

注:

• 默认的是外阴影（outset），但是不可以写这个单词，否则导致阴影无效
• 盒子阴影不占空间，不会影响其它盒子的排列

3.文字阴影

css3中，可以使用text-shadow属性将阴影应用于文本

text-shadow: h-shadow v-shadow blur color;