原文地址://www.greatytc.com/p/ff88f6823873
1 边框内圆角
CSS代码
#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;
}
}
html
<div id="wrapper">
<div id = "content">
content
</div>
</div>
效果图
aaa.jpg
使用 box-shadow 和 outline 实现类似的效果
css 代码
#wrapper{
width: 200px;
height:80px;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
background: rgb(85, 136, 187);
color: #fff;
font-size: 14px;
border-radius: 20px;
box-shadow: 0 0 0 10px rgb(255, 187, 51);//box-shadow 会沿着图形周边添加
outline: 10px solid rgb(255, 187, 51);//outline 不跟随图形的边 进行描边
}
2 条纹背景
效果图
tw.jpg
css 代码
#stripe {
width: 400px;
height: 200px;
background: linear-gradient(rgb(255, 187, 51) 50%, rgb(85, 136, 187) 50%);
background-size: 100% 50px;
}
多条纹(同一个颜色 有个开始点 有个结束点)
#stripe {
width: 400px;
height: 200px;
background: linear-gradient(
rgb(255, 187, 51) 0,
rgb(255, 187, 51) 33.3%,
rgb(85, 136, 187) 33.3%,
rgb(85, 136, 187) 66.6%,
rgb(170, 255, 0) 66.6%,
rgb(170, 255, 0) 100%
);
background-size: 100% 50px;
}
dtw.jpg
斜条纹
CSS代码
#stripe {
width: 400px;
height: 400px;
background: linear-gradient(45deg,
rgb(255, 187, 51) 0%,
rgb(255, 187, 51) 30%,
rgb(85, 136, 187) 0,
rgb(85, 136, 187) 50%,
rgb(255, 187, 51) 50%,
rgb(255, 187, 51) 80%,
rgb(85, 136, 187) 80%
);
background-size: 50px 50px;
}
效果图
image.png
斜条纹 每个CSS绘制的 只是一个50*50 的 小方块 要想把小方块叠加成斜条纹 需要根据想要的效果 合理设置百分比
3 平行四边形和梯形
平行四边形
CSS代码
#content {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 80px;
margin-left:100px;
background: rgb(85, 136, 187);
color: #fff;
font-size: 14px;
transform: skewX(-30deg);
span {
transform: skewX(30deg);
}
}
使用transform实现平行四边形效果
image.png
使用伪元素实现平行四边形的背景
css代码
#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;//使用绝对定位把 伪元素 放到div 下面
top: 0;
left: 0;
right: 0;
bottom: 0;
transform: skewX(-30deg);
background: rgb(85, 136, 187);
z-index: -1;
}
}
梯形
CSS代码
.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);
}
}
效果图
image.png
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;
}
}
效果图
image.png
4 阴影
实现图片的阴影
CSS代码
#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)
}
}
