慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

_陈加南等于JC

基本语法：background-origin: border-box/ padding-box/ content-box 设置元素图片的起始显示位置 border-box为从边框开始显示 padding-box为从内填充开始显示 content-box为从内容开始显示

查看全部

0 采集收起来源：CSS3背景 background-origin
2016-05-31
_陈加南等于JC

基本语法：text-shadow: X-Offset Y-Offset blur color; 基本与box-shadow差不多，X、Y表示偏移方向，正值右下，负值左上； Blur为模糊度，不能为负，越大越模糊； color为颜色；

查看全部

0 采集收起来源：CSS3文字与字体文本阴影text-shadow
2016-05-31
_陈加南等于JC

@font-face { font-family:字体名称; src:字体在服务器上的相对或绝对地址; } //只有这样设置之后的字体，才能在font-family中使用

查看全部

0 采集收起来源：CSS3文字与字体嵌入字体@font-face
2016-05-31
_陈加南等于JC

text-overflow:ellipsis; ←表示溢出的文字用省略号来表示 overflow:hidden; ←表示溢出的文字隐藏 white-space:nowrap; ←强制文本在一行内显示以上3条写在一起能在一行省略溢出的文字 word-wrap:break-word 强制文字在边界处断开换行

查看全部

0 采集收起来源：CSS3文字与字体 text-overflow 与 word-wrap
2016-05-31
_陈加南等于JC

linear-gradient() 可以实现颜色渐变，基本语法如下： linear-gradient(渐变方向，颜色集) 渐变方向可以用英文或者角度来描述，角度只能描述4个直线方向，而英文多了对角线的方向颜色集用逗号分开，用输入的颜色来进行渐变

查看全部

0 采集收起来源：CSS3颜色渐变色彩
2016-05-31
_陈加南等于JC

border-image 为CSS的style属性，基本语法如下： border-image:url() 切割图片的宽度 [延伸方式] url为图片的绝对路径，切割图片的宽度与普通的border基本一致，延伸方式有3种选择： repeat重复，round平铺，stretch拉伸

查看全部

0 采集收起来源：CSS3边框为边框应用图片 border-image
2016-05-31
_陈加南等于JC

box-shadow 为CSS3中的style属性，可以为盒子添加阴影，语法如下： box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; X,Y轴偏移量为正时，为右下阴影；为负时，为左上阴影；以此类推投影方式inset（内部投影）只能写在最后，而且默认为外部阴影（即无inset）

查看全部

0 采集收起来源：CSS3边框阴影 box-shadow（一）
2016-05-31
_陈加南等于JC

border-radius 可以加入圆角边框，改变方式是将某一个方向的角转换为以Dpx为半径的1/4圆，也可以通过border-radius()，在()添加角度（如：45deg）改变圆角

查看全部

0 采集收起来源：CSS3边框圆角效果 border-radius
2016-05-31
切克闹_

:target 直接写入以后全局匹配。只要a标签里面的href和某一个关联了就可以改变了。。。不过:target 后面要写上元素的名称

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—target
2016-05-31
大全123

文本阴影text-shadow text-shadow可以用来设置文本的阴影效果。语法： text-shadow: X-Offset Y-Offset blur color; X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移； Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移； Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0； Color：是指阴影的颜色，其可以使用rgba色。比如，我们可以用下面代码实现设置阴影效果。 text-shadow: 0 1px 1px #fff

查看全部

0 采集收起来源：CSS3文字与字体文本阴影text-shadow
2016-05-31
大全123

嵌入字体@font-face @font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。语法： @font-face { font-family : 字体名称; src : 字体文件在服务器上的相对或绝对路径; } 这样设置之后，就可以像使用普通字体一样在（font-*）中设置字体样式。比如： p { font-size :12px; font-family : "My Font"; /*必须项，设置@font-face中font-family同样的值*/ }

查看全部

0 采集收起来源：CSS3文字与字体嵌入字体@font-face
2018-03-22
大全123

text-overflow 与 word-wrap text-overflow用来设置是否使用一个省略标记（...）标示对象内文本的溢出。语法：但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果，代码如下： text-overflow:ellipsis; overflow:hidden; white-space:nowrap; 同时，word-wrap也可以用来设置文本行为，当前行超过指定容器的边界时是否断开转行。语法： normal为浏览器默认值，break-word设置在长单词或 URL地址内部进行换行，此属性不常用，用浏览器默认值即可

查看全部

0 采集收起来源：CSS3文字与字体 text-overflow 与 word-wrap
2016-05-31
大全123

渐变色彩 CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。由于不同的渲染引擎实现渐变的语法不同，这里我们只针对线性渐变的 W3C 标准语法来分析其用法，其余大家可以查阅相关资料。W3C 语法已经得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等浏览器的支持。

查看全部

0 采集收起来源：CSS3颜色渐变色彩
2016-05-31
大全123

颜色之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);

查看全部

0 采集收起来源：CSS3颜色颜色之RGBA
2016-05-31
大全123

为边框应用图片 border-image 就是为边框应用背景图片，它和我们常用的background属性比较相似。 background:url(xx.jpg) 10px 20px no-repeat; 但是又比背景图片复杂一些。想象一下：一个矩形，有四个边框。如果应用了边框图片，图片该怎么分布呢？图片会自动被切割分成四等分。用于四个边框。可以理解为它是一个切片工具，会自动把用做边框的图片切割。怎么切割呢？为了方便理解，做了一张特殊的图片，由9个矩形（70*70像素）拼成的一张图（210*210像素），并标注好序号，九宫图，如下：根据border-image的语法： #border-image{ background:#F4FFFA; width:210px; height:210px; border:70px solid #ddd; border-image:url(borderimg.png) 70 repeat } 效果：从序号可以看出div的四个角分别对应了背景图片的四个角。而2,4,6,8 被重复。5在哪？因为是从四周向中心切割图片的所以，5显示不出来。而在chrome浏览器中5是存在的 repeat的意思就是重复，目前因为是刚好被整除，效果看不出来。如果改下DIV的宽高，再来看重复的效果边角部分为裁掉了，可见repeat就是一直重复，然后超出部分剪裁掉，而且是居中开始重复。 Round 参数：Round可以理解为圆满的铺满。为了实现圆满所以会压缩（或拉伸 #border-image { width:170px; height:170px; border:70px solid; border-image:url(borderimg.png) 70 round; } 效果：可见图片被压扁了。 Stretch 很好理解就是拉伸，有多长拉多长。有多远“滚”多远。 border-image:url(borderimg.png) 70 stretch 看一下效果： 2,4,6,8分别被拉伸显示。注意：Chrome下，中间部分也会被拉伸，webkit浏览器对于round属性和repeat属性似乎没有区分，显示效果是一样的。

查看全部

0 采集收起来源：CSS3边框为边框应用图片 border-image
2016-05-31

首页上一页 511 512 513 514 515 516 517 下一页尾页

0/150

提交

取消

开始学习

课程须知: 1.html+CSS相关基础知识 2.具有一定的网页制作经验 3.此课程不支持IE9版本以下，建议使用 chrome、safari、firefox、opera浏览器学习本课程。

老师告诉你能学到什么？: 1.系统学习CSS3相关知识 2.轻松制作出各种绚丽的效果