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

凡梦_leo

已于 2024-07-09 12:56:28 修改

阅读量318

点赞数 5

分类专栏： # CSS 文章标签： css 笔记平面 css3 前端

于 2024-07-09 12:52:37 首次发布

本文链接：https://blog.csdn.net/qq_55006020/article/details/131657910

版权

CSS 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

圆角

阴影

渐变

圆角

关键字 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" href="#">我是一个字体，我也想有阴影1</a>

css 添加一个红色的阴影

        div{
            margin: 40px;

        }
/*<!--        设定三个值的时候  前面2个必选 为水平和垂直位置 第三个值选择的是颜色-->*/
        .box{
            width: 200px;
            height: 200px;
            background-color: pink;
        /*    设置阴影
        往左边去个10 往右边也去一个10 背景为红色
        */
            box-shadow: 10px 10px red;
        }

演示

css 添加一个模糊的效果

/*<!--   多添加一个值，设置一个模糊效果-->*/
        .box2{
            width: 200px;
            height: 200px;
            background-color: pink;
        /*    设置阴影
        往左边去个10 往右边也去一个10 背景为红色
        模糊值越大，模糊范围越广
        */
            /*box-shadow: 10px 10px 1px red ;*/
            /*box-shadow: 10px 10px 100px red ;*/
            /*box-shadow: 10px 10px 10px red ;*/
        /*    如果是3个方向的阴影效果就是第一个水平为0*/
        /*    往下稍微延伸了一点点阴影*/
            box-shadow: 0 10px 10px red;

        }

效果

css 添加三个方向的阴影案例

        .box3{
            width: 200px;
            height: 200px;
            background-color: pink;
        /*    设置阴影尺寸
        往左边去个10 往右边也去一个10 背景为红色
        模糊值越大，模糊范围越广
        */
            /*box-shadow: 10px 10px 1px red ;*/
            /*box-shadow: 10px 10px 100px red ;*/
            box-shadow: 10px 10px  10px 10px red ;
        /*                               第四个10px是以阴影为为中心往外扩算       */
        }

效果

css 内阴影案例

    /*    更改为内部阴影*/
        .box4{
            width: 200px;
            height: 150px;
            background-color: green;
            /*内部阴影的时候 通常垂直和水平距离都为0 然后阴影一容器尺寸往内扩算*/
            box-shadow: 0 0 10px red inset;
        }

效果

css 给字体添加阴影

    /*    给字体设置阴影*/
        .a1{
            font-size: 20px;
            text-shadow: 1px 1px red;
        }

效果

css给字体添加阴影效果二

    /*    给字体设置阴影 设置模糊
    第一个值 是水平 第二个值是垂直 第三个值是模糊 第四个值是颜色
    */
        .a2{
            font-size: 20px;
            text-shadow: 2px 2px 5px green;
        }

效果

渐变

关键字 background:linear-gradient();

在背景属性里面background 设置linear-gradient()方法 ;

渐变可以在两个或者多个指定颜色之间显示平稳的过渡;

创建渐变的前提

1,必须定义两种颜色的节点,即想要呈现平稳过渡的颜色;

2,同时也要设置一个起点和方向或者角度;

案例

html

<body>

<div class="box">
</div>

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</body>

css 案例一实现从上到下的渐变效果

        div{
            margin: 20px;
        }
        .box{
            width: 200px;
            height: 300px;
            /*设置渐变    直线   斜度          */
            /*这是2个颜色渐变*/
            /*background: linear-gradient(red,pink);*/
            /*这是三个颜色渐变色*/
            background: linear-gradient(red,pink,green);
        }

效果

css效果样式二设置从右到左

        .box1{
            width: 300px;
            height: 400px;
            /*从右到左*/
            /*background: linear-gradient(to left,red,white);*/
        /*    从左到右  居然是个反的*/
            background: linear-gradient(to right,red,white);
        }

效果

css效果样式三设置从下到上

        .box2{
            width: 300px;
            height: 400px;
            /*设置从下到上*/
            background: linear-gradient(to top,red,white);
        }

效果

css样式效果四设置从下到上

        .box3{
            width: 300px;
            height: 400px;
            /*设置从下到上  这个是默认的*/
            background: linear-gradient(to bottom,red,white);
        }

效果

css案例演示从右下角开始

          width: 300px;
            height: 400px;
            /*设做上角落 到右下角 */
            background: linear-gradient(to bottom right,red,white);
        }

效果

从任意角度 deg

角度图:

        .box5{
            width: 300px;
            height: 400px;
            /*角度 根据象限来的 o  */
            background: linear-gradient(45deg,red,white);
        }

效果