文章内容来自CSS神书《CSS揭秘》。
献上膝盖就好
1、自适应的椭圆
使用border-radius来创建椭圆,但是鲜为人知的是border-radius可以接收百分比参数以及接收两个长宽半径。(实际上border-radius的工作和border没有关系)
div {
width: 500px;
height: 400px;
border: 2px solid #000;
display: inline-block;
margin: 10px;
}
div:nth-child(1) {
background-color: yellow;
border-radius: 200px 100px;
}
div:nth-child(2) {
background-color: yellow;
border-radius: 200px / 100px; /*指定创建固定大小的椭圆圆角,只需要中间加上一个斜杠就可以*/
}
div:nth-child(3) {
background-color: yellow;
border-radius: 50% / 50%; /*使用百分比来创建自适应大小的椭圆圆角*/
}
效果
2、半椭圆
然而border-radius远比这更加灵活,通过指定的值可以完成对每一个角的弯曲。仔细用法可以查看css手册,因此也可以指定四个角的椭圆的垂直半径和水平半径。
div:nth-child(4) {
background-color: red;
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
div:nth-child(5) {
background-color: red;
border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
div:nth-child(6) {
background-color: red;
border-radius: 100% 0 0 100% / 50% 0 0 50%;
}
效果:
甚至是四分之一椭圆:
div:nth-child(8) {
background-color: deeppink;
border-radius: 100% 0 0 0;
}
div:nth-child(9) {
background-color: deeppink;
border-radius: 0 0 0 100% / 0 0 0 100%;
}
效果:
3、平行四边形
可以使用skew方法来进行拉伸。比如下面生成的就是一个平行四边形的按钮。
<div>
<a href="#" class="button">
click me
</a>
</div>
div:nth-child(1) {
width: 500px;
height: 400px;
border: 2px solid black;
display: inline-block;
font-size: 30px;
line-height: 400px;
text-align: center;
background-color: skyblue;
transform: skewX(-45deg);
margin: 300px;
}
效果:
但是这里一般来说我们不想让元素的内容发生变化,所以可以个a标签规定样式:
.button {
transform: skewX(45deg);
text-decoration: none;
display: block;
}
效果:
除了这样的嵌套元素处理能够产生这样的效果,使用伪元素的方案也可以做到,并且更加通用的是,这种方式对于改变容器外形而不改变容器内容很有用。
<a class="new_button">click me</a>
.new_button {
position: relative;
width: 300px;
height: 200px;
font-size: 30px;
line-height: 200px;
text-align: center;
display: inline-block;
}
.new_button::before {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
z-index: -1;
background-color: yellow;
content: '';
transform: skewX(-45deg);
}
效果是一样的:
4、菱形图片效果
有的时候我们想要图片不是矩形而是各种好看的形状,菱形图片就是一种。实现的方法有两种,第一种就是简单的元素嵌套和元素变形:
<div>
<img src="https://unsplash.com/photos/WNoLnJo7tS8/download?ixid=MnwxMjA3fDB8MXxhbGx8fHx8fHx8fHwxNjY1MDM4OTUy&force=true&w=640" />
</div>
使用旋转和图片放缩效果:
div {
width: 640px;
height: 640px;
overflow: hidden;
transform: rotate(45deg);
margin: 300px;
border-radius: 50px;
}
div > img {
max-width: 100%;
transform: rotate(-45deg) scale(1.42); /*旋转45度,并且从中心放大1.42倍*/
}
效果:
但其实还有更加好的实现的方法,没错,那就是使用clip-path属性。
img {
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
实现的效果一模一样,真的很简单,其中的polygon是多边形函数。甚至可以加上动画:
img {
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
transition: 1s clip-path;
}
img:hover {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
这样的效果就是:鼠标悬浮在头像上时,图片边框会自动回复到原来的正方形。
5、切角效果
切角是一种常见的设计风格,但是使用css实现并不简单。一般来说可以使用渐变来完成简单的切角。
div {
width: 500px;
height: 500px;
display: inline-block;
border: 2px solid black;
margin: 10px;
}
/*斜切*/
div:nth-child(1) {
background: linear-gradient(-45deg, transparent 10%, #58a 0) bottom right,
linear-gradient(45deg, transparent 10%, #58a 0) bottom left,
linear-gradient(135deg, transparent 10%, #58a 0) top left,
linear-gradient(-135deg, transparent 10%, #58a 0) top right;
background-size: 50% 50%;
background-repeat: no-repeat;
}
/*弧切*/
div:nth-child(2) {
background: radial-gradient(circle at top left, transparent 10%, red 0) top left,
radial-gradient(circle at top right, transparent 10%, red 0) top right,
radial-gradient(circle at bottom left, transparent 10%, red 0) bottom left,
radial-gradient(circle at bottom right, transparent 10%, red 0) bottom right;
background-size: 50% 50%;
background-repeat: no-repeat;
}
效果
书里面还推荐了一种border-image+svg实现的方法,简单说就是制作一个边框svg放到border上面。另外还有一种就是使用clip-path来实现,代码虽然简单,但是面对修改尺寸的问题时,就会尤为麻烦。
/*使用border-image和svg*/
div:nth-child(3) {
border: 20px solid #58a;
border-image: 1 url('data:image/svg+xml, \
<svg xmlns="http://www.w3.org/2000/svg"\
width="3" height="3" fill="green">\
<polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/>\
</svg>');
/* background: #58a; */
background-clip: padding-box;
}
/*使用clip-path*/
div:nth-child(4) {
background: deeppink;
border: 3px solid black;
clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%,
0 calc(100% - 20px), 0 20px);
}
效果
6、梯形的按钮
常见的按钮形式,使用css创建一个梯形是一件不简单的任务。主要思路是利用3D透视的原理来创建一个梯形。(矩形透视过去就是一个梯形)
<div class="tab">home</div>
.tab {
position: relative;
display: inline-block;
padding: .5em 1em .35em;
color: white;
}
.tab::before {
/*之前提到过的思路,使用伪元素的方法可以避免内容被变形*/
content: '';
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
z-index: -1;
background: #58a;
transform: scaleY(1.3) perspective(.5em) rotateX(5deg);
transform-origin: bottom;
}
效果
简单的梯形按钮运用:
html:
<nav>
<a href="#">Home</a>
<a href="#" class="selected">Projects</a>
<a href="#">About</a>
</nav>
<main>
Content area
</main>
<nav class="left">
<a href="#">Home</a>
<a href="#" class="selected">Projects</a>
<a href="#">About</a>
</nav>
<main>
Content area
</main>
<nav class="right">
<a href="#">Home</a>
<a href="#" class="selected">Projects</a>
<a href="#">About</a>
</nav>
<main>
Content area
</main>
css:
body {
padding: 40px;
font: 130%/2 Frutiger LT Std, sans-serif;
}
nav {
position: relative;
z-index: 1;
padding-left: 1em;
}
nav > a {
position: relative;
display: inline-block;
padding: .3em 1em 0;
color: inherit;
text-decoration: none;
margin: 0 -.3em;
}
nav > a::before,
main {
border: .1em solid rgba(0,0,0,.4);
}
nav a::before {
content: ''; /* To generate the box */
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
border-bottom: none;
border-radius: .5em .5em 0 0;
background: #ccc linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,0));
box-shadow: 0 .15em white inset;
transform: scale(1.1, 1.3) perspective(.5em) rotateX(5deg);
transform-origin: bottom;
}
nav a.selected { z-index: 2;}
nav a.selected::before {
background-color: #eee;
margin-bottom: -.08em;
}
main {
display: block;
margin-bottom: 1em;
background: #eee;
padding: 1em;
border-radius: .15em;
}
/*这里旋转理解的关键在于视角的改变*/
nav.left > a::before {
transform: scale(1.2, 1.3) perspective(.5em) rotateX(5deg);
transform-origin: bottom left;
}
nav.right { padding-left: 2em; }
nav.right > a::before {
transform: scale(1.2, 1.3) perspective(.5em) rotateX(5deg);
transform-origin: bottom right;
}
效果:
7、简单的饼图
饼图的运用十分频繁,下面就是使用css来实现饼图而不是使用图像完成。
在这里推荐使用角向渐变:
div {
width: 500px;
height: 500px;
border-radius: 50%;
background: conic-gradient(#655 15%, yellowgreen 0, yellowgreen 50%, red 0, red 75%, blue 0);
}
效果