CSS3--边框阴影/圆角/渐变

最新推荐文章于 2023-07-27 20:19:43 发布

jiaody111

最新推荐文章于 2023-07-27 20:19:43 发布

阅读量929

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weixin_42139212/article/details/101014257

版权

css 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

边框阴影box-shadow:

阴影有内阴影和外阴影之分，默认都是外阴影。
box-shadow: 水平偏移垂直偏移阴影半径阴影扩展阴影颜色内外阴影;
快速添加阴影只需要编写三个参数即可：box-shadow: 水平偏移垂直偏移阴影半径;
默认情况下阴影的颜色和盒子内容的颜色一致

        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 100px auto;
            text-align: center;
            line-height: 200px;
            box-shadow: 10px 10px 10px;
            color: yellow;
        }

在这里插入图片描述

文字阴影 text-shadow:

text-shadow: 水平偏移垂直偏移阴影半径阴影颜色 ;

text-shadow: 10px 10px 10px;
color: purple;

在这里插入图片描述

边框圆角border-radius：将边框的直角变成圆角

在边框的四个顶点，分别在四条边上，按照指定的像素值（百分比）找到各自距离顶点的距离和圆心，绘制圆弧。

            /*border-radius: 0px 0px 0px 100px;  按照左上/右上/右下/左下的顺序*/
            当省略某一个参数，会参考他的对角
            /*border-radius: 100px 80px 40px;	如果省略一个参数, 会变成对角的值 */
            /*border-radius: 100px 80px;	如果省略两个参数, 会变成对角的值*/
            /*border-radius: 100px;	如果省略三个参数, 其它角会和它一样*/
            /*border-radius: 100px;	如果指定的半径是当前元素宽高的一半, 那么就是一个圆形*/
            /*border-radius: 50%;*/

注：
1.当边框圆角的值 > 边框宽度，外边框和内边框都会变成圆角
2. 当边框圆角的值 <= 边框宽度，只有外边框会变成圆角，内边框依旧是直角

            width: 200px;
            height: 200px;
            border: 20px solid #000;
            margin: 100px auto;
            border-radius: 40px; 边框圆角大于边框宽度，内外边框都变成圆角

在这里插入图片描述

		    border: 20px solid #000;
            margin: 100px auto;
            border-radius: 20px; 边框圆角<=边框值，内边框依旧是直角

在这里插入图片描述

单独设置某个角的半径border–xx–xx–radius

设置椭圆：水平方向的半径是宽度的一半，垂直方向的半径是高度的一半

如果传递两个参数：第一个参数是水平方向的半径，第二个参数是垂直方向的半径
            width: 200px;
            height: 100px;
            border: 1px solid #000;
            margin: 100px auto;
            border-top-left-radius: 100px 50px;
            border-top-right-radius: 100px 50px;
            border-bottom-left-radius: 100px 50px;
            border-bottom-right-radius: 100px 50px;
            简写形式：
            /* 斜杠之前的代表左上/右上/右下/左下的水平方向的半径
               斜杠之后的代表左上/右上/右下/左下的垂直方向的半径 */
            /*border-radius: 100px 100px 100px 100px / 50px 50px 50px 50px;*/
            /*border-radius: 100px / 50px;*/

在这里插入图片描述

圆角练习–太极图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .out{
            width: 400px;
            height: 400px;
            background: skyblue;
            box-sizing: border-box;
            margin: 100px auto;
            position: relative;
        }
        .top{
            width: 400px;
            height: 200px;
            box-sizing: border-box;
            border-top-left-radius: 200px;
            border-top-right-radius: 200px;
            background: white;
        }
        .bottom{
            width: 400px;
            height: 200px;
            box-sizing: border-box;
            border-bottom-left-radius: 200px;
            border-bottom-right-radius: 200px;
            background: black;
        }
        .left{
            position: absolute;
            left: 0;
            top: 100px;
            height: 200px;
            width: 200px;
            background: white;
            border: 60px solid black;
            border-radius: 100px;
            box-sizing: border-box;
        }
        .right{
            position: absolute;
            right: 0;
            top: 100px;
            height: 200px;
            width: 200px;
            background:black;
            border: 60px solid white;
            border-radius: 100px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<div class="out">
    <div class="top"></div>
    <div class="bottom"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>

在这里插入图片描述

圆角练习–跳动的心

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .out{
            margin: 100px auto;
            width: 450px;
            height: 400px;
            position: relative;
            animation: change 1s linear 0s infinite normal;
        }
        .left, .right{
            height: 250px;
            width: 250px;
            background: red;
            border-radius: 50%;
            position: absolute;
            top: 0;
            box-shadow: 0 0 40px red;
        }
        .left{
            left: 0;
        }
        .right{
            right: 0;
        }
        .bottom{
            height: 250px;
            width: 250px;
            background: red;
            position: absolute;
            bottom: 50px;
            left: 50%;
            margin-left: -125px;
            transform: rotate(45deg);
            box-shadow: 0 0 40px red;
        }
        @keyframes change {
            0%{
                transform: scale(1);
            }
            50%{
                transform: scale(1.2);
            }
            100%{
                transform: scale(1);
            }
        }
    </style>
</head>
<body>
<div class="out">
    <div class="left"></div>
    <div class="right"></div>
    <div class="bottom"></div>
</div>
</body>
</html>

在这里插入图片描述

边框图片border-image

参考文章
border-image-source 指定边框图片资源
border-image-slice 需要 4 个参数值，依次指定 top、right、bottom、left 这 4 个方向上的切割宽度。注意：不需要单位。
border-image-width 指定边框图片的显示宽度，默认的边框宽度会失效
border-image-repeat 边框图片四个角以外的图片如何填充, 默认是拉伸
border-image-outset 需要四个参数指定上右下左四个方向边框图片外移多少
简写：

/*border-image: 资源地址 切割方式 填充模式;*/
border-image: url("images/border.jpg") 70 fill round;

线性渐变和径向渐变

			 /*
            线性渐变: 默认从上至下  background: linear-gradient(red, green);
            径向渐变: 默认从中心点向四周扩散 background: radial-gradient(red, green);
            */
            
            /*
            线性渐变: 可以通过to 关键字的方式修改渐变的方向
            background: linear-gradient(to top right ,red, green);
            径向渐变: 可以通过at 关键字的方式修改开始渐变的位置
            background: radial-gradient(at top left ,red, green);
            */

            /*
            线性渐变: 可以通过 角度deg的方式修改渐变的方向
            background: linear-gradient(90deg,red, green);
            径向渐变: 可以通过at 位置 位置的方式修改开始渐变的位置
            background: radial-gradient(at 200px 100px ,red, green);
            */

            /*
            线性渐变可以指定纯色和渐变的范围
            只有第一个颜色后面的范围是指定纯色的范围, 后面的都是指定渐变的范围
            background: linear-gradient(to right, red 100px, green 200px, blue 300px);
            水平方向从左到右0-100px是纯红色，100px到200px是红色到绿色渐变，200px到300px是绿色到蓝色的渐变，300px到最右边的纯蓝色没有渐变。
            
            径向渐变可以指定扩散的范围
            background: radial-gradient(100px, red, green);
            从中心点向外扩散100px是红色到绿色的渐变，半径100px之外的区域是纯绿色没有渐变。
            */

            /*
            注意点:
            如果需要同时指定扩散的位置和扩散的范围, 那么范围必须写到at前面
            */
            background: radial-gradient(100px at 200px 100px ,red, green);

线性渐变练习–卡拉ok

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        div{
            margin: 100px auto;
            height: 80px;
            width: 800px;
            border: 1px solid black;
            line-height: 80px;
            font-size: 75px;
            font-weight: bold;
            color: transparent;
            background: red;
            -webkit-background-clip: text;
            background-image: url("images/text_bg.jpg");
            background-repeat: no-repeat;
            background-position: -800px 0;
            animation: move 5s linear 0s infinite normal;
        }
        @keyframes move {
            from{
                background-position: -800px 0;
            }
            to{
                background-position: 800px 0;
            }
        }
    </style>
</head>
<body>
<div>
    伤过的心,就像玻璃碎片
</div>
</body>
</html>

在这里插入图片描述

线性渐变练习

jiaody111

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS3--边框阴影/圆角/渐变

边框圆角border-radius：将边框的直角变成圆角在边框的四个顶点，分别在四条边上，按照指定的像素值（百分比）找到各自距离顶点的距离和圆心，绘制圆弧。 /*border-radius: 0px 0px 0px 100px; 按照左上/右上/右下/左下的顺序*/ 当省略某一个参数，会参考他的对角 /*border-ra...
复制链接

扫一扫