- 1、本文档共25页,可阅读全部内容。
- 2、有哪些信誉好的足球投注网站(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
CSS3学习笔记
CSS3学习笔记
border-radius:25px 0 25px 0; 设置圆角,分别是左上,右上,右下,左下
box-shadow : X轴轴偏偏移移量量 Y轴轴偏偏移移量量 [阴阴影影模模糊糊半半径径] [阴阴影影扩扩展展半半径径] [阴阴影影颜颜色色] [投投影影方方式式];
box-shadow :4px 4px 6px #666; 外阴影
box-shadow :4px 4px 6px #666 inset; 内阴影
box-shadow :4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset; 阴影
图片边框
border-ima e:url(http ://im .mukewan .com/52e22a 1c0001406e0304022 1.jp ) 15 repeat ;
颜色RGBA
color :r ba(R,G,B,A)
back round-color:r ba(100, 120,60,0.5);
渐变色彩
线性渐变
参数
back round-ima e:linear- radient(to left, red, oran e,yellow, reen,blue,indi o,violet);
text-overflow 与 word-wrap
但是text-overflow 只是用来说明文字溢出时用什么方式显示,要实现溢出时产生省省略略号号的效果,还须定义
强强制制文文本本在在一一行行内内显显示示 (white-space:nowrap)及溢溢出出内内容容为为隐隐藏藏 (overflow:hidden),只有这样才能实
现溢溢出出文文本本显显示示省省略略号号的效果,代码如下:
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
word-wrap也可以用来设置文文本本行行为为,当前行超过指定容器的边界时是否断开转行。
语法:
normal为浏览器默认值,break-word设置在长长单单词词或 URL地地址址内部进行换行,此属性不常用,用浏览器
默认值即可。
嵌入字体@font-face
@font-face能够加载服务器端的字体文件,让浏览器端可以显示用户电脑里没有安装的字体。
语法:
@font-face {
font-family : 字体名称自定义的名称,以备后面调用;
src : 字体文件在服务器上的相对或绝对路径;
}
@font-face {
font-family: shenymce Font;
src: url(/Amaranth- oldItalic.otf);
}
这样设置之后,就可以像使用普通字体一样在 ((font-*))中设置字体样式。
比如:
p {
font-size :12px;
font-family : My ont;
/*必须项,设置@font-face中font-family同样的值*/
}
文本阴影text-s adow
text-shadow可以用来设置文本的阴影效果。
语语法法::
text-shadow: X-Offset Y-Offset blur color;
X-Offset :表示阴影的水平偏移距离,其值为正值时阴影向右偏移,反之向左偏移;
Y-Offset :是指阴影的垂直偏移距离,如果其值是正值时,阴影向下偏移,反之向上偏移;
lur:是指阴影的模糊程度,其值不能是负值,如果值越大,阴影越模糊,反之阴影越清晰,如果不需要阴
影模糊可以将 lur值设置为0;
Color:是指阴影的颜色,其可以使用rgba色。
比如,我们可以用下面代码实现设置阴影效果。
text-shadow: 0 1px 1px #fff
background-origin
设置元素背景图片的原原始始起起始始位位置置。
语法:
background-origin : border-box | padding-box | content-box;
参数分别表示背景图片是从边边框框,还是内内边边距距 ((默默认认值值)),或者是内内容容区区域域开始显示。
效果如下:
需需要要注注意意的的是是,如果背景不是no-repeat,这个属性无效,它会从边框开始显示。
back
文档评论(0)