不一样的背景图像可用逗号隔开css
<style> #example1 { background-image: url(img_flwr.gif), url(paper.gif); background-position: right bottom, left top; background-repeat: no-repeat, repeat; padding: 15px; } </style>
background-origin: content-box/padding-box/ border-box
background-origin属性指定了背景图像的位置区域css3
background-clip: content-box/padding-box/ border-box
background-clip属性规定背景的绘制区域web
<style> #grad1 { height: 200px; background: -webkit-linear-gradient(red, green); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, green); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red, green); /* Firefox 3.6 - 15 */ background: linear-gradient(red, green); /* 标准的语法(必须放在最后 /* background: linear-gradient(to right, red, green); 渐变方向向右 */ /* background: linear-gradient(to bottom right, red, green); 渐变方向向右下角 */ /* background: linear-gradient(35deg, red, green); 渐变方向 渐变线35deg */ /* background: linear-gradient(to right, red, green, blue, orange); 使用多个颜色节点 */ /* background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); 渐变颜色可设置透明度*/ /* background: repeating-linear-gradient(red, yellow 10%, green 20%); 可重复线性渐变 */ /* background: radial-gradient(red, green, blue); 径向渐变 */ /* background: radial-gradient(circle, red, yellow, green); 设置形状的径向渐变 */ } </style>
Internet Explorer 9 及以前的版本不支持渐变。css3动画
<h5 style="text-shadow: 5px 5px 5px #FF0000;">文字效果 text sfdfsfsdfsfsf</h5>
text-overflow: ellipsis; 超出的文本 省略显示 ...布局
word-wrap:break-word; 容许长文本换行字体
word-break: keep-all/break-all 单词是否拆分换行flex
可选择本身须要的字体动画
<style> @font-face { font-family: myfontname; src: url(font.woff); } div { font-family:myfontname; } </style>
对元素进行移动、缩放、转动、拉长或拉伸。url
div { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ }
transform属性spa
元素从一种样式逐渐改变为另外一种的效果。
div { width:100px; height:100px; background:red; transition: width 2s, height 2s, transform 2s; -webkit-transition: width 2s, height 2s, -webkit-transform 2s;/* Safari or Chrome on MacOS*/ } div:hover { width:300px; }
transition属性
@keyframes 建立动画
@keyframes myfirst { from {background: red;} to {background: yellow;} } @-webkit-keyframes myfirst /* Safari 与 Chrome */ { from {background: red;} to {background: yellow;} } @keyframes myframes { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} } @-webkit-keyframes myframes /* Safari 与 Chrome */ { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} } div { animation: myfirst 5s; -webkit-animation: myfirst 5s; /* Safari 与 Chrome */ }
animation属性
div { -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */ -moz-column-rule: 1px solid lightblue; /* Firefox */ column-rule: 1px solid lightblue; } h2 {column-span: all;}
.flex-container { display: -webkit-flex; display: flex; width: 400px; height: 250px; background-color: lightgrey; } .flex-item { background-color: cornflowerblue; width: 100px; height: 100px; margin: 10px; }
align-content: flex-start | flex-end | center | space-between | space-around | stretch
align-self: auto | flex-start | flex-end | center | baseline | stretch 子元素自身的对齐方式