在页面创建中，一些CSS技巧可以显着提高页面显示质量。 利用CSS3代码就可以实现很多简单又美观的页面表现，减少图片的使用。
1、边框圆角
我们在设计按钮等控件时，会遇到这样的设计：只有外角有圆角，而边框或遮罩的四个角仍保持直角形状，用下面的代码就可以轻松实现。
#wrapper {
width: 200px;
height: 80px;
padding: 10px;
background: rgb(255, 187, 51);
#content {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background: rgb(85, 136, 187);
color: #fff;
font-size: 14px;
border-radius: 20px;
}
}这一方案需要使用两个dom元素，那么如果只使用一个dom元素，应该如何实现呢？
这里需要用到CSS的两个属性：box-shadow和outline属性，具体属性参见MDN。
box-shadow属性有以下5个特点
这里我们将使用第四个属性spread-radius来填补处理中的空白。 同时凭借outline的特性来实现：笔画不跟随边框的轮廓（因为目前还不清楚这是否是一个bug，所以未来版本可能会改变），具体代码如下。
box-shadow: 0 0 0 10px rgb(255, 187, 51);
outline: 10px solid rgb(255, 187, 51);这种实现方式对边框的长度和圆角的大小有一定的限制。 只有当框架长度w与圆角直径r之间存在aw≥(√2-1)r关系时才能实现。
2.条纹背景
如何使用CSS实现白色？
使用线性梯度属性实现
#stripe {
width: 400px;
height: 200px;
background: linear-gradient(rgb(255, 187, 51), rgb(85, 136, 187));
}尝试改变线性渐变属性，当线性渐变属性
background: linear-gradient(rgb(255, 187, 51) 50%, rgb(85, 136, 187) 50%);因为白色是由background-image属性生成的，所以实际上可以使用background-size属性来改变它的大小
background-size: 100% 40px;如果某个色标的位置值小于整个列表中它之前的色标的位置值，则该色标的位置值将被设置为所有色标的位置值中的最大值它上面。
background: linear-gradient(rgb(255, 187, 51) 60%, rgb(85, 136, 187) 0);然后我们尝试创建一个五色水平条和一个垂直下摆
background: linear-gradient(
rgb(255, 187, 51) 33.3%,
rgb(85, 136, 187) 0,
rgb(85, 136, 187) 66.6%,
rgb(170, 255, 0) 0
);
垂直下摆
background: linear-gradient(to right, rgb(255, 187, 51) 60%, rgb(85, 136, 187) 0);默认为bottom，可以设置为right； 向左等
斜白
background: linear-gradient(45deg,
rgb(255, 187, 51) 25%,
rgb(85, 136, 187) 0,
rgb(85, 136, 187) 50%,
rgb(255, 187, 51) 0%,
rgb(255, 187, 51) 75%,
rgb(85, 136, 187) 0
);
background-size: 30px 30px;为了达到斜白、等宽的视觉效果，需要利用毕达哥拉斯定理来估计间距。
background-size: 42px 42px;引入线性渐变的升级版本：重复线性渐变
您可以尝试使用线性渐变和重复线性渐变来实现相同的60°斜白以进行比较
background: linear-gradient(60deg,
rgb(255, 187, 51),
rgb(255, 187, 51) 25%,
rgb(85, 136, 187) 0,
rgb(85, 136, 187) 50%,
rgb(255, 187, 51) 0,
rgb(255, 187, 51) 75%,
rgb(85, 136, 187) 0,
rgb(85, 136, 187) 100%
);
background-size: 18px 31px;
background: repeating-linear-gradient(60deg,
rgb(255, 187, 51),
rgb(255, 187, 51) 15px,
rgb(85, 136, 187) 0,
rgb(85, 136, 187) 30px
);3. 平行四边形和矩形
使用transform属性轻松创建平行四边形
#content {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 80px;
background: rgb(85, 136, 187);
color: #fff;
font-size: 14px;
transform: skewX(-30deg);
span {
transform: skewX(30deg);
}
}缺点：需要两个元素，修改的话需要改两个地方。
如何用一种元素来达到这样的疗效。
解决方法：在伪元素上设置平行四边形的背景，并对伪元素进行变换。
#content {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 120px;
height: 60px;
font-size: 18px;
font-weight: 600;
color: #fff;
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transform: skewX(-30deg);
background: rgb(85, 136, 187);
z-index: -1;
}
}梯形的概念比平行四边形更抽象，只需两条边平行即可。 梯形常用于标签页，之前也用伪元素来实现过矩形。
.trapezoid {
position: relative;
left: 200px;
width: 400px;
height: 180px;
background: rgb(85, 136, 170);
display: flex;
justify-content: center;
align-items: center;
font-size: 48px;
color: rgb(255, 255, 255);
&::before,
&::after {
content: '';
position: absolute;
}
&::before {
position: absolute;
top: 0;
left: -100px;
width: 0;
height: 0;
border-top: 180px solid transparent;
border-bottom: 0 solid transparent;
border-right: 100px solid rgb(255, 187, 51);
}
&::after {
position: absolute;
top: 0;
right: -240px;
width: 0;
height: 0;
border-top: 180px solid transparent;
border-bottom: 0 solid transparent;
border-left: 240px solid rgb(255, 187, 51);
}
}缺点：
两个伪元素都被使用；
当需要改变形状时，改变的方式太多；
您不能向矩形添加边框或阴影；
不能设置为圆角矩形；
通过构造平行四边形的思想，使圆变形。 但这次css3 平行四边形，不是使用 2d 平面变体，而是使用 3d 平面变体通过视觉差异构造矩形。
这里需要用到transform属性3d变换特性：
看法
旋转3d（旋转X旋转Y旋转Z）
变换原点
缩放3d（缩放X 缩放Y 缩放Z）
实现最简单的矩形所需的代码只有下面一行：
transform: perspective(200px) rotateX(30deg);与 2d 变换不同，3d 内部变换是不可逆的，因此与构造平行四边形类似，我们也可以在伪元素上放置图形变换。
.trapezoid {
position: relative;
left: 200px;
width: 400px;
height: 180px;
display: flex;
justify-content: center;
align-items: center;
font-size: 48px;
color: rgb(255, 255, 255);
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgb(85, 136, 170);
transform: perspective(200px) rotateX(30deg);
z-index: -1;
}
}优化
1.修改transform-origin属性来控制旋转轴
transform-origin: bottom;
2.使用scale3d属性代替padding属性来修正视觉尺寸，同时有优雅的退化
transform: perspective(200px) rotateX(30deg) scaleY(2.25);3.添加圆角、阴影和背景渐变
background: linear-gradient(to right, rgb(85, 136, 170), rgb(255, 187, 51));
border-top-right-radius: 60px;
border-top-left-radius: 60px;
box-shadow: 10px 10px 10px 1px rgba(85, 136, 170, .2);4. 更改transform-origin以获取不同底数的矩形
transform: perspective(200px) rotateX(10deg);
transform-origin: left;缺点
斜边的角度取决于单元的长度。 因此css3 平行四边形，当元素的内容宽度不相等时，想要得到一个斜率一致的矩形并不容易。
3d变换的具体实现原理参见matrix3d
4. 影子
投影首先会想到box-shadow属性。 根据上面的介绍，我们可以轻松制作一个元素的阴影
#shadow {
width: 200px;
height: 100px;
background: rgb(255, 187, 51);
box-shadow: 240px 120px 0 0 red;
}那么如何实现图片对应的阴影呢？这些效果在页面上比如头像显示都会遇到
这里会用到CSS3上面的filter属性
#logo {
position: relative;
width: 200px;
height: 200px;
background: url('../img/logo.svg') no-repeat;
&::after {
content: '';
position: absolute;
top: 40px;
left: 0;
width: 100%;
height: 100%;
background: url('../img/logo.svg') no-repeat;
background-size: 100% 100%;
filter: blur(10px)
}
}
