CSS基础笔记十:CSS3新特性一 圆角,阴影,渐变

目录

圆角

阴影

渐变

---

圆角

关键字 border_redius

border_redius可以给任何元素制作圆角

<!--
border-radius
有四个值的时候 就是上 右 下 左
3个字的时候 就是左上  右上 左下（注意是对角喔）  右下
2个值的时候 就是左上 右下  右上左下  对角
1个值的时候 就是4个角同时
    设定一个是圆的时候 可以使用50%来设置

border-redius 可以给任何元素设置倒角
比如常见的给按钮设置倒角
-->

        .box2{
            background-color: pink;
            border: 5px solid red;
            height: 300px;
            border-radius: 10% 30% 15% 25%;
        }

圆角案例 吧一个正方形的盒子变成一个圆圈

html:

<div class="box7"></div>

css

        .box5{
            background-color: pink;
            border: 1px solid red;
            width:200px;
            height: 200px;
            border-radius: 50%;
        }

效果

阴影

关键字 box-shadow 

box-shadow可以给任何一个元素添加一个或者多个阴影

语法:

box-shadow:10px 10px red

参数

里面的值 第一个值是水平阴影位置 第二个值是垂直阴影位置 后面几个是可选
顺序分贝是模糊距离 阴影尺寸 阴影颜色 为内部
   h-shadow  必选 水平阴影的位置
   v-shadow  必选 垂直阴影的位置
   blur 可选 模糊距离
   spread 可选 阴影的尺寸
   color 可选阴影的颜色
   inset 可选 外部阴影修改为内部阴影

案例 

html   这段html 应用下面所有的css样式案例

<div class="box">
</div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>

<span class="a1">我是一个文本，我也想有阴影效果</span>

<a class="a2"