-
ext-shadow可以用来设置文本的阴影效果。 语法： text-shadow: X-Offset Y-Offset blur color;查看全部
-
@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。 在CSS样式里面写@font-face{ font-family:my font(自己取） src:字体路径} 后面设置字体时要和你自己取的字体名称相同，如p{font-family:my font}查看全部
-
text-overflow:ellipsis; 使用一个省略标记（...）标示对象内文本的溢出 text-overflow:clip(表示剪切)|ellipsis(表示显示省略标记) 但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果查看全部
-
CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。 linear-gradient(to left,#fff,#999) 表示颜色的起始点和终结点，可以有两至多个色值 radial设置渐变不需要加方向，加方向没有效果显示查看全部
-
为边框应用图片： border-image : url网址（超链接） 切割图片的宽度 图片延伸方式 border-image : url(borderimg.png) 70 round\repeat\stretch; repeat：重复 round：拉伸，压缩 stretch：拉伸，有多长拉多长查看全部
-
边框 阴影 box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; 内阴影：inset 外阴影：无Inset 为一个盒子添加多个阴影：用逗号隔开查看全部
-
border-radius 顺时针方向设置边角 一般px为单位查看全部
-
前缀 浏览器 -webkit chrome和safari -moz firefox -ms IE -o opera查看全部
-
通过“:only-of-type”选择器来修改容器中仅有一个类型元素的背景查看全部
-
通过“:only-child”选择器，来控制仅有一个子元素的样式查看全部
-
CSS3颜色 渐变色彩 CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。由于不同的渲染引擎实现渐变的语法不同，这里我们只针对线性渐变的 W3C 标准语法来分析其用法，其余大家可以查阅相关资料。W3C 语法已经得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等浏览器的支持。 这一小节我们来说一下线性渐变：  参数： 第一个参数:指定渐变方向，可以用“角度”的关键词或“英文”来表示：  （单击图片可放大） 第一个参数省略时，默认为“180deg”，等同于“to bottom”。 第二个和第三个参数，表示颜色的起始点和结束点，可以有多个颜色值。 background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet); 效果图：  任务 在下列代码中的第14行，为文字段落添加从右下角向左上角的线性渐变背景 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Gradient</title> <style type="text/css"> p { width: 400px; height: 150px; line-height: 150px; text-align:center; color: #000; font-size:24px; background-image:?; } </style> </head> <body> <p>右下角向左上角的线性渐变背景</p> </body> </html> 本课程编程练习请使用电脑登录 www.imooc.com查看全部
-
CSS3颜色 渐变色彩 CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。由于不同的渲染引擎实现渐变的语法不同，这里我们只针对线性渐变的 W3C 标准语法来分析其用法，其余大家可以查阅相关资料。W3C 语法已经得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等浏览器的支持。 这一小节我们来说一下线性渐变：  参数： 第一个参数:指定渐变方向，可以用“角度”的关键词或“英文”来表示：  （单击图片可放大） 第一个参数省略时，默认为“180deg”，等同于“to bottom”。 第二个和第三个参数，表示颜色的起始点和结束点，可以有多个颜色值。 background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet); 效果图：  任务 在下列代码中的第14行，为文字段落添加从右下角向左上角的线性渐变背景 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Gradient</title> <style type="text/css"> p { width: 400px; height: 150px; line-height: 150px; text-align:center; color: #000; font-size:24px; background-image:?; } </style> </head> <body> <p>右下角向左上角的线性渐变背景</p> </body> </html> 本课程编程练习请使用电脑登录 www.imooc.com查看全部
-
CSS3边框 阴影 box-shadow（二） 1、阴影模糊半径与阴影扩展半径的区别 阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊； 阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小； 2、X轴偏移量和Y轴偏移量值可以设置为负数 box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; X轴偏移量为负数： .boxshadow-outset{ width:100px; height:100px; box-shadow:-4px 4px 6px #666; } 效果图：  Y轴偏移量为负数： .boxshadow-outset{ width:100px; height:100px; box-shadow:4px -4px 6px #666; } 效果图：  任务 index.html <!doctype html> <html> <head> <meta charset="utf-8"> <title>boxshadow</title> <style> .boxshadow-outset{ width:100px; height:100px; box-shadow:4px 4px 6px #666; } </style> </head> <body> <h2>外阴影</h2> <div class="boxshadow-outset"> </div> </body> </html> 本课程编程练习请使用电脑登录 www.imooc.com查看全部
-
matrix(a,b,c,d,e,f)是一个集skew、scale和translate于一身的功能。a:x轴缩放 bc:xy轴变形 d：y轴缩放 ef：xy轴位移查看全部
-
XX:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。 这里XX是指该元素仅有一个，在其父元素下查看全部
举报
0/150
提交
取消