css中border边框纹理,使用CSS3实现的几种纹理图案和大象拼图-CSDN博客

CSS

语言：

CSSSCSS

确定

.pattern1 {

background: linear-gradient(135deg, #eee 25%, transparent 25%) -50px 0, linear-gradient(225deg, #eee 25%, transparent 25%) -50px 0, linear-gradient(315deg, #eee 25%, transparent 25%), linear-gradient(45deg, #eee 25%, transparent 25%);

background-size: 20px 20px;

background-color: #444;

}

.pattern2 {

background: radial-gradient(circle at 100% 50%, rgba(0, 0, 0, 0) 20%, rgba(255, 255, 255, 0.3) 21%, rgba(255, 255, 255, 0.3) 34%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0)), radial-gradient(circle at 0% 50%, rgba(0, 0, 0, 0) 20%, rgba(255, 255, 255, 0.3) 21%, rgba(255, 255, 255, 0.3) 34%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0)) 0 -50px;

background-color: #aaa;

background-size: 22px 33px;

}

.pattern3 {

background: linear-gradient(63deg, #eee 23%, transparent 23%) 7px 0, linear-gradient(63deg, transparent 74%, #eee 78%), linear-gradient(63deg, transparent 34%, #eee 38%, #eee 58%, transparent 62%), #444;

background-size: 16px 48px;

}

.pattern5 {

background-color: #eee;

background-image: linear-gradient(transparent 50%, rgba(255, 255, 255, 0.5) 50%);

background-size: 10px;

}

.pattern6 {

background: -webkit-linear-gradient(60deg, #999999 12%, transparent 12.5%, transparent 87%, #999999 87.5%, #999999 0), -webkit-linear-gradient(-60deg, #999999 12%, transparent 12.5%, transparent 87%, #999999 87.5%, #999999 0), -webkit-linear-gradient(60deg, #999999 12%, transparent 12.5%, transparent 87%, #999999 87.5%, #999999 0), -webkit-linear-gradient(-60deg, #999999 12%, transparent 12.5%, transparent 87%, #999999 87.5%, #999999 0), -webkit-linear-gradient(30deg, #bbbbbb 25%, transparent 25.5%, transparent 75%, #bbbbbb 75%, #bbbbbb 0), -webkit-linear-gradient(30deg, #bbbbbb 25%, transparent 25.5%, transparent 75%, #bbbbbb 75%, #bbbbbb 0), #aaaaaa;

background: -moz-linear-gradient(30deg, #999999 12%, transparent 12.5%, transparent 87%, #999999 87.5%, #999999 0), -moz-linear-gradient(150deg, #999999 12%, transparent 12.5%, transparent 87%, #999999 87.5%, #999999 0), -moz-linear-gradient(30deg, #999999 12%, transparent 12.5%, transparent 87%, #999999 87.5%, #999999 0), -moz-linear-gradient(150deg, #999999 12%, transparent 12.5%, transparent 87%, #999999 87.5%, #999999 0), -moz-linear-gradient(60deg, #bbbbbb 25%, transparent 25.5%, transparent 75%, #bbbbbb 75%, #bbbbbb 0), -moz-linear-gradient(60deg, #bbbbbb 25%, transparent 25.5%, transparent 75%, #bbbbbb 75%, #bbbbbb 0), #aaaaaa;

background: linear-gradient(30deg, #999999 12%, transparent 12.5%, transparent 87%, #999999 87.5%, #999999 0), linear-gradient(150deg, #999999 12%, transparent 12.5%, transparent 87%, #999999 87.5%, #999999 0), linear-gradient(30deg, #999999 12%, transparent 12.5%, transparent 87%, #999999 87.5%, #999999 0), linear-gradient(150deg, #999999 12%, transparent 12.5%, transparent 87%, #999999 87.5%, #999999 0), linear-gradient(60deg, #bbbbbb 25%, transparent 25.5%, transparent 75%, #bbbbbb 75%, #bbbbbb 0), linear-gradient(60deg, #bbbbbb 25%, transparent 25.5%, transparent 75%, #bbbbbb 75%, #bbbbbb 0), #aaaaaa;

background-position: 0 0, 0 0, 30px 60px, 30px 60px, 0 0, 30px 60px;

background-size: 20px 40px;

}

body {

background: #333;

line-height: 0%;

}

#head {

border-radius: 40%;

background-size: 16px 48px;

width: 220px;

height: 220px;

position: relative;

left: 50%;

top: 30%;

margin-left: -110px;

margin-top: -410px;

}

#head:before {

content: "";

background-color: #444;

border-radius: 50%;

width: 20px;

height: 20px;

position: absolute;

left: 25%;

top: 50%;

margin-left: -10px;

margin-top: -10px;

}

#head:after {

content: "";

background-color: #444;

border-radius: 50%;

width: 20px;

height: 20px;

position: absolute;

left: 75%;

top: 50%;

margin-left: -10px;

margin-top: -10px;

}

#nose {

content: "";

border-radius: 20%;

background: #ddd;

width: 100px;

height: 290px;

-webkit-clip-path: polygon(15% 0, 89% 0, 70% 100%, 33% 100%);

clip-path: polygon(15% 0, 89% 0, 70% 100%, 33% 100%);

position: relative;

left: 50%;

top: 30%;

margin-left: -50px;

margin-top: -125px;

}

.ears {

height: 500px;

background-color: #333;

width: 700px;

margin: auto;

}

#ear {

border: solid #444 3px;

border-radius: 50%;

width: 320px;

height: 300px;

position: relative;

-webkit-clip-path: polygon(24% 6%, 34% 4%, 44% 3%, 51% 5%, 61% 7%, 70% 10%, 78% 12%, 83% 20%, 87% 26%, 92% 31%, 92% 45%, 88% 58%, 81% 64%, 79% 73%, 73% 82%, 63% 89%, 51% 89%, 40% 89%, 29% 86%, 19% 80%, 13% 68%, 11% 57%, 11% 43%, 10% 32%, 11% 19%, 14% 9%);

clip-path: polygon(24% 6%, 34% 4%, 44% 3%, 51% 5%, 61% 7%, 70% 10%, 78% 12%, 83% 20%, 87% 26%, 92% 31%, 92% 45%, 88% 58%, 81% 64%, 79% 73%, 73% 82%, 63% 89%, 51% 89%, 40% 89%, 29% 86%, 19% 80%, 13% 68%, 11% 57%, 11% 43%, 10% 32%, 11% 19%, 14% 9%);

}

#ear.right {

left: 350px;

top: 55px;

}

#ear.left {

left: 25px;

top: -255px;

}

.pattern4 {

background-color: silver;

background-image: radial-gradient(circle at 100% 150%, #c0c0c0 24%, #ffffff 25%, #ffffff 28%, #c0c0c0 29%, #c0c0c0 36%, #ffffff 36%, #ffffff 40%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0)), radial-gradient(circle at 0 150%, #c0c0c0 24%, #ffffff 25%, #ffffff 28%, #c0c0c0 29%, #c0c0c0 36%, #ffffff 36%, #ffffff 40%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0)), radial-gradient(circle at 50% 100%, #ffffff 10%, #c0c0c0 11%, #c0c0c0 23%, #ffffff 24%, #ffffff 30%, #c0c0c0 31%, #c0c0c0 43%, #ffffff 44%, #ffffff 50%, #c0c0c0 51%, #c0c0c0 63%, #ffffff 64%, #ffffff 71%, rgba(0, 0, 0, 0) 71%, rgba(0, 0, 0, 0)), radial-gradient(circle at 100% 50%, #ffffff 5%, #c0c0c0 6%, #c0c0c0 15%, #ffffff 16%, #ffffff 20%, #c0c0c0 21%, #c0c0c0 30%, #ffffff 31%, #ffffff 35%, #c0c0c0 36%, #c0c0c0 45%, #ffffff 46%, #ffffff 49%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), radial-gradient(circle at 0 50%, #ffffff 5%, #c0c0c0 6%, #c0c0c0 15%, #ffffff 16%, #ffffff 20%, #c0c0c0 21%, #c0c0c0 30%, #ffffff 31%, #ffffff 35%, #c0c0c0 36%, #c0c0c0 45%, #ffffff 46%, #ffffff 49%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0));

background-size: 40px 20px;

}

.flip {

-moz-transform: scaleX(-1);

-webkit-transform: scaleX(-1);

-o-transform: scaleX(-1);

transform: scaleX(-1);

-ms-filter: fliph;

/*IE*/

filter: fliph;

/*IE*/

}