-
第一个参数:指定渐变方向，可以用“角度”的关键词或“英文”来表示： （单击图片可放大） 第一个参数省略时，默认为“180deg”，等同于“to bottom”。 第二个和第三个参数，表示颜色的起始点和结束点，可以有多个颜色值。 background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);查看全部
-
渐变色彩 CSS3 Gradient分为线性渐变(linear)和径向渐变(radial)。由于不同的渲染引擎实现渐变的语法不同，这里我们只针对线性渐变的W3C标准语法来分析其用法，其余大家可以查阅相关资料。查看全部
-
圆角效果 border-radius border-radius是向元素添加圆角边框。 使用方法： border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */ 不要以为border-radius的值只能用px单位，你还可以用百分比或者em，但兼容性目前还不太好。 实心上半圆： 方法：把宽度（width）设为高度(height)的一半，并且只设置左上角和右上角的半径与元素的高度一致（大于也是可以的）。 div{ height:50px;/*是width的一半*/ width:100px; background:#9da; border-radius:50px 50px 0 0;/*半径至少设置为height的值*/ } 实心圆： 方法：把宽度（width）与高度(height)值设置为一致（也就是正方形），并且四个圆角值都设置为它们值的一半。如下代码： div{ height:100px;/*与width设置一致*/ width:100px; background:#9da; border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/ }查看全部
-
rgba(R,G,B,A) 不仅可以用于背景，也也可以用于边框等，只要设置颜色的地方，都可以用这个来这是透明度查看全部
-
颜色之RGBA RGB是一种色彩标准，是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。RGBA是在RGB的基础上增加了控制alpha透明度的参数。 语法： color：rgba(R,G,B,A) 以上R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A为透明度参数，取值在0~1之间，不可为负值。 代码示例： background-color:rgba(100,120,60,0.5);查看全部
-
border-image:url(borderimg.png) 70 repeat查看全部
-
为边框应用图片 border-image 顾名思义就是为边框应用背景图片，它和我们常用的background属性比较相似。例如： background:url(xx.jpg) 10px 20px no-repeat; 但是又比背景图片复杂一些。 想象一下：一个矩形，有四个边框。如果应用了边框图片，图片该怎么分布呢？ 图片会自动被切割分成四等分。用于四个边框。 可以理解为它是一个切片工具，会自动把用做边框的图片切割。查看全部
-
添加多个阴影： 以上的语法的介绍，就这么简单，如果添加多个阴影，只需用逗号隔开即可。如： .box_shadow{ box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset; }查看全部
-
为元素设置内阴影： 示例代码： .box_shadow{ box-shadow:4px 2px 6px #333333 inset; }查看全部
-
为元素设置外阴影： 示例代码： .box_shadow{ box-shadow:4px 2px 6px #333333; } 效果： 为元素设置内阴影： 示例代码： .box_shadow{ box-shadow:4px 2px 6px #333333 inset; } 效果： 添加多个阴影： 以上的语法的介绍，就这么简单，如果添加多个阴影，只需用逗号隔开即可。如： .box_shadow{ box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset; }查看全部
-
阴影 box-shadow box-shadow是向盒子添加阴影。支持添加一个或者多个。 很简单的一段代码，就实现了投影效果，酷毙了。我们来看下语法： box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];查看全部
-
制作导航菜单综合查看全部
-
变形--原点 transform-origin 任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。 在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。 transform-origin取值和元素设置背景中的background-position取值类似，如下表所示： 关键词 百分比 top=top center=center top 50% 0 right=right center=center right 100%或(100% 50%) bottom=bottom center=center bottom 50% 100% left=left center=center left 0或(0 50%) center=center center 50%或(50% 50%) top left=left top 0 0 right top=top right 100% 0 bottom left=left bottom 0 100% bottom right=right bottom 100% 100%查看全部
-
background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...查看全部
-
multiple backgrounds 多重背景，也就是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加，缩写时为用逗号隔开的每组值；用分解写法时，如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），表明所有背景图片应用该属性值。查看全部
举报
0/150
提交
取消