CSS效果实现

效果属性

box-shadow
text-shadow
border-radius
background
clip-path

box-shadow

营造立体感
充当没有宽度的边框（也可以用outline）
特殊效果（画图）

在这里插入图片描述

text-shadow

立体感
描边

*{
	text-shadow:1px 1px 0 white;
	/*偏移量 模糊 颜色*/
}

border-radius

圆角矩形
圆形
半圆/扇形/椭圆

tips：边框在圆角的计算范围之内

*{
	border-radius:1px 1px 1px 1px/1px 1px 1px 1px;
	/*比较少见的用法，前边是水平偏移量，后边是垂直偏移量*/
}

clip-path

对容器进行裁剪
常见几何图形
自定义路径
类似与遮罩不改变元素定位

	*{
		    clip-path: inset(100px 50px); /*缩减宽高*/
		    clip-path: ellipse(130px 140px at 10% 20%)/*椭圆*/
            clip-path: circle(50px at 100px 100px);/*圆形*/
            clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 10% 10%, 40px 10px);/*指定点*/
            clip-path: url(#clipPath);/*指定矢量SVG*/
	}

background

纹理、图案
渐变
雪碧图动画（切换开关之类）

        .i{
            width: 20px;
            height: 20px;
            background: url() no-repeat;
            background-size: 20px 40px;
            transition: background-position .4s;
        }
        .i:hover{
            background-position: 0 -20px;
        }

背景图尺寸适应

*{
	background-size:contain
	background-size:cover
}

3D transform

translate
scale
skew
rotate

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container{
            margin:50px;
            padding: 10px;
            border: 1px solid red;
            width: 200px;
            height: 200px;
            position: relative;
            perspective: 500px;
            /* transform-style: preserve-3d; */
            /* transform: translateZ(-100px); */
            /* transition:transform .4s; */
        }
        .container{
            /* transform: translateZ(-100px) rotateX(90deg) rotateY(90deg); */
        }
        #cube{
            /* width:200px; */
            /* height:200px; */
        }
        #cube div{
            width: 200px;
            height:200px;
            position: absolute;
            line-height: 200px;
            font-size:50px;
            text-align: center;
        }
        #cube:hover{
            /* transform: translateZ(-100px) rotateX(270deg); */
            /* transform: translateZ(-100px) rotateX(90deg) rotateY(90deg); */
        }
        .front{
            transform: translateZ(100px);
            /* transform: translateX(100px); */
            /* transform: translateX(100px) translateY(10px) rotate(25deg); */
            /* transform: rotate(25deg) translateX(100px) translateY(10px); */
            background:rgba(255,0,0,.3);
        }
        .back{
            /* transform: translateZ(-100px); */
            transform: translateZ(-100px) rotateY(180deg);
            background:rgba(0,255,0,.3);
        }
        .left{
            transform: translateX(-100px) rotateY(-90deg);
            background:rgba(0,0,255,.3);
        }
        .right{
            transform: translateX(100px) rotateY(90deg);
            background:rgba(255,255,0,.3);
        }
        .top{
            transform: translateY(-100px) rotateX(-90deg);
            background:rgba(255,0,255,.3);
        }
        .bottom{
            transform: translateY(100px) rotateX(90deg);
            background:rgba(0,255,255,.3);
        }

        
    </style>
</head>
<body>
    <div class="container">
        <div id="cube">
            <div class="front">1</div>
            <div class="back">2</div>
            <div class="right">3</div>
            <div class="left">4</div>
            <div class="top">5</div>
            <div class="bottom">6</div>
        </div>
    </div>
</body>
</html>

性能需求比较高
复杂场景容易出现bug

效果属性

box-shadow

text-shadow

border-radius

clip-path

background

3D transform

猜你喜欢