css按钮下凹效果图,CSS3 凸凹面按钮

CSS

语言：

CSSSCSS

确定

body {

background: #666;

color: #f0f0f0;

text-align: center;

text-shadow: 2px 2px #000;

}

.item {

background: #FC0;

display: inline-block;

height: 50px;

margin: 30px;

width: 50px;

}

.row {

margin: 10px;

}

.rounded {

border: 10px solid #666;

border-radius: 10px;

position: relative;

}

.rounded:before {

border: 10px solid;

border-radius: 20px;

bottom: -20px;

content: "";

display: block;

left: -20px;

position: absolute;

right: -20px;

top: -20px;

}

.rounded:after {

border: 10px solid;

border-radius: 0px;

bottom: 0;

content: "";

display: block;

left: 0;

position: absolute;

right: 0;

top: 0;

}

.rounded:before {

border-color: #888 #444 #444 #888;

}

.rounded:after {

border-color: #444 #888 #888 #444;

}

.vertical {

border: 10px solid #666;

position: relative;

}

.vertical:before {

border: 10px solid;

bottom: -20px;

content: "";

display: block;

left: -20px;

position: absolute;

right: -20px;

top: -20px;

}

.vertical:after {

border: 10px solid;

bottom: 0;

content: "";

display: block;

left: 0;

position: absolute;

right: 0;

top: 0;

}

.vertical:before {

border-color: #888 #444 #222 #444;

}

.vertical:after {

border-color: #222 #444 #888 #444;

}

.circle {

border: 10px solid #666;

border-radius: 50px;

position: relative;

}

.circle:before {

border: 10px solid;

border-radius: 60px;

bottom: -20px;

content: "";

display: block;

left: -20px;

position: absolute;

right: -20px;

top: -20px;

}

.circle:after {

border: 10px solid;

border-radius: 40px;

bottom: 0;

content: "";

display: block;

left: 0;

position: absolute;

right: 0;

top: 0;

}

.circle:before {

border-color: #888 #444 #444 #888;

}

.circle:after {

border-color: #444 #888 #888 #444;

}

.rounded-concave {

border: 10px solid #666;

border-radius: 10px;

position: relative;

}

.rounded-concave:before {

border: 10px solid;

border-radius: 20px;

bottom: -20px;

content: "";

display: block;

left: -20px;

position: absolute;

right: -20px;

top: -20px;

}

.rounded-concave:after {

border: 10px solid;

border-radius: 0px;

bottom: 0;

content: "";

display: block;

left: 0;

position: absolute;

right: 0;

top: 0;

}

.rounded-concave:before {

border-color: #444 #888 #888 #444;

}

.rounded-concave:after {

border-color: #888 #444 #444 #888;

}

.vertical-concave {

border: 10px solid #666;

position: relative;

}

.vertical-concave:before {

border: 10px solid;

bottom: -20px;

content: "";

display: block;

left: -20px;

position: absolute;

right: -20px;

top: -20px;

}

.vertical-concave:after {

border: 10px solid;

bottom: 0;

content: "";

display: block;

left: 0;

position: absolute;

right: 0;

top: 0;

}

.vertical-concave:before {

border-color: #222 #444 #888 #444;

}

.vertical-concave:after {

border-color: #888 #444 #222 #444;

}

.circle-concave {

border: 10px solid #666;

border-radius: 50px;

position: relative;

}

.circle-concave:before {

border: 10px solid;

border-radius: 60px;

bottom: -20px;

content: "";

display: block;

left: -20px;

position: absolute;

right: -20px;

top: -20px;

}

.circle-concave:after {

border: 10px solid;

border-radius: 40px;

bottom: 0;

content: "";

display: block;

left: 0;

position: absolute;

right: 0;

top: 0;

}

.circle-concave:before {

border-color: #444 #888 #888 #444;

}

.circle-concave:after {

border-color: #888 #444 #444 #888;

}