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*/

}

.row {

height: 50px;

}

.move {

-webkit-animation: BackgroundAnimated 15s linear infinite;

-moz-animation: BackgroundAnimated 15s linear infinite;

-ms-animation: BackgroundAnimated 15s linear infinite;

-o-animation: BackgroundAnimated 15s linear infinite;

animation: BackgroundAnimated 15s linear infinite;

}

@keyframes BackgroundAnimated {

from {

background-position: 0 0;

}

to {

background-position: 100% 0;

}

}

@-webkit-keyframes BackgroundAnimated {

from {

background-position: 0 0;

}

to {

background-position: 100% 0;

}

}

@-ms-keyframes BackgroundAnimated {

from {

background-position: 0 0;

}

to {

background-position: 100% 0;

}

}

@-moz-keyframes BackgroundAnimated {

from {

background-position: 0 0;

}

to {

background-position: 100% 0;

}

}

css中border边框纹理,使用CSS3实现的几种纹理图案和大象拼图相关推荐

  1. CSS中Border(边框)

    1.css边框 css边框(border)可以使围绕元素内容和内边距的一条或多条线,对于这些线条,可以直接自定义它们的样式,宽度颜色等. 2.边框样式 border-style的值 | none 默认 ...

  2. css中border边框纹理,8个CSS实现的纹理图案

    CSS 语言: CSSSCSS 确定 html, body { margin: 0; padding: 0; height: 100%; } body { display: flex; flex-wr ...

  3. html边框是啥意思,css中border是什么意思

    css中border是什么意思?有什么用? border是边框的意思,它是css的一个简写属性,用于在一个声明设置所有的边框属性.可以设置的边框属性有:边框的宽度.边框的样式.边框的颜色. 说明: 可 ...

  4. 使html轮廓颜色不同,css中border颜色不同怎么设置？

    层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. css中bord ...

  5. html5border设置彩色,css中border颜色不同怎么设置？

    层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. css中bord ...

  6. CSS中border的所有样式属性

    CSS中border的所有样式属性 1.solid:实线 使用方法:border:solid 1px #000; 我发现border:1px solid #000;和border:solid 1px ...

  7. html边框复合属性,详解CSS的border边框属性及其在CSS3中的新特性

    基础你可能很熟悉边的最基本用法. CSS Code复制内容到剪贴板 border:1pxsolidblack; 上面的代码将给元素应用1px的边.即简洁又简单:但我们也可以稍作修改. CSS Code ...

  8. css 设置border边框颜色渐变效果

    一.效果 首先可以看一下下图显示的实现效果: 底部边框,左侧渐变效果 右侧边框,上下都有一个渐变的效果 点击查看demo代码 二.实现 1. linear-gradient 首先我们先了解一下css中 ...

  9. css中border制作各种形状

    css利用border制作各种形状的原理如图: 使用border绘制三角形是什么原理?事实上,宽度相等的border是以45度对接的,如下图: 没有了上border如图所示: 再设置border的宽度 ...

最新文章

  1. 字节跳动学习笔记：javaweb商城项目
  2. 一年后斩获腾讯T3，层层深入
  3. Java线程：线程的调度-优先级
  4. xshell如何运行java_利用Xshell往应用服务器上部署项目
  5. 传统到敏捷的转型中，谁更适合做Scrum Master？
  6. 像目标主机一样的tcp流重组
  7. Java学习关于集合框架的基础接口--Collection接口
  8. Docker学习总结（36）——利用Google开源Java容器化工具Jib构建镜像
  9. 运算符重载——拷贝构造函数与赋值运算符的区别、如何实现赋值运算符的深拷贝
  10. 『转』Dr.Web Security Space 8 – 免费3个月
  11. Java的各种中文乱码解决方法
  12. fedora linux五笔输入法,教你在Fedora 14 下安装五笔输入法
  13. 一种简易的直流电机正反转限位电路
  14. AutoLisp从入门到放弃（四）
  15. 量化交易——PEG策略
  16. XMind使用教程入门
  17. P4556 雨天的尾巴 线段树合并
  18. php 把数字转化为大写中文(完善版)
  19. C语言程序设计简谐运动的模拟,C语言课程设计简谐振动实验的模拟.doc
  20. 浙江大学机械系制造所2010届毕业生…

热门文章

  1. 史上首次商业太空旅游，到底有没有进太空?
  2. Windows 7 (x64) 系统下安装与配置 Windows Live Writer 2012 16.4.3528.0331 图文详细教程
  3. 菜鸟小队（艾妮教务系统）对于各组意见反馈
  4. 最精简mysql查询
  5. 计算机软件作为无形资产摊销,购进计算机软件如何摊销
  6. 繁华落尽，捡拾一地伤
  7. 在IDEA中安装webpack
  8. 黄金点游戏（结对项目）
  9. 为什么核电站的核反应堆原料一定要用铀？
  10. 基于数据仓库的证券CRM系统建设