首页 > Web开发 > 详细

CSS3

时间:2016-08-15 13:04:00      阅读:335      评论:0      收藏:0      [点我收藏+]

渐变色彩

线性渐变(linear):

径向渐变(radial):

background-image:linear-gradient(to left, red 30%,blue);

 

背景图片

background-image : none | url ( url );

body { background-image:url(images/bg.gif);}

 

背景平铺方式

background-repeat : repeat | no-repeat | repeat-x | repeat-y

 

背景定位:

background-position : 左对齐方式  上对齐方式

body { background-position:left bottom;}

 

背景原点

background-origin : border-box | padding-box | content-box;

 

背景的显示区域

background-clip : border-box | padding-box | content-box | text

 

背景样式缩写

body { background:#EDEDED url(images/bg.png) no-repeat 50% 30px;}

 

多重背景:

background-repeat : repeat1,repeat2,...,repeatN;

backround-position : position1,position2,...,positionN;

background-size : size1,size2,...,sizeN;

background-attachment : attachment1,attachment2,...,attachmentN;

background-clip : clip1,clip2,...,clipN;

background-origin : origin1,origin2,...,originN;

background-color : color;

 

项目符号:

background-repeat : repeat1,repeat2,...,repeatN;

backround-position : position1,position2,...,positionN;

background-size : size1,size2,...,sizeN;

background-attachment : attachment1,attachment2,...,attachmentN;

background-clip : clip1,clip2,...,clipN;

background-origin : origin1,origin2,...,originN;

background-color : color;

 

项目符号:

ul { list-style-type:disc;}            /*实心圆*/

ul { list-style-type:circle;}                   /*空心圆*/

ul { list-style-type:square;}                /*实心方块*/

ul { list-style-type:none;}          /*不显示项目符号*/

ol { list-style-type:decimal;}              /*阿拉伯数字*/

ol { list-style-type:lower-roman;}              /*小写罗马数字*/

ol { list-style-type:upper-alpha;}                /*大写英文字母*/

 

自定义项目符号

ul {list-style-image:url(images/arrow.gif)}

 

 

变形样式:

transform:none |  <transform-function>

 

CSS3

原文:http://www.cnblogs.com/612555lhk/p/5772500.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!