css3 (二) 手册 01
圆角
border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */ border-radius:10px; /* 所有角都使用半径为10px的圆角 */ /* 实心圆 */ div{ height:100px;/*与width设置一致*/ width:100px; background:#9da; border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/ } /* 左半圆 */ div.semi-circle{ height:100px; width:50px; background:#9da; border-radius:50px 0 0 50px; }
阴影 box-shadow
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; .box_shadow{ box-shadow:4px 2px 6px #333333; } .box_shadow{ box-shadow:4px 2px 6px #333333 inset; } 1、阴影模糊半径与阴影扩展半径的区别 - 阴影模糊半径:此参数可选,其值-只能是为正值-,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊; - 阴影扩展半径:此参数可选,其值-可以是正负值-,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小;
图片边框 border-image
#border-image{ background:#F4FFFA; width:210px; height:210px; border:70px solid #ddd; border-image:url(borderimg.png) 70 repeat }
#border-image { width:170px; height:170px; border:70px solid; border-image:url(borderimg.png) 70 round; }
border-image:url(borderimg.png) 70 stretch
渐变 gradient
// 线性渐变 background: linear-gradient(to bottom , orange, yellow); 第一个参数: /* to bottom 往下 to bottom right 左下到右下 to bottom left to up left to up to up right to right to left */ 第二个参数: 起始颜色 第三个参数: 终止颜色
background: linear-gradient(30deg, red, green); // 可以指定角度,0度为 to up , 随着度数的增加,是顺时针旋转
// 可以设置开始渐变和结束渐变的位置 background: linear-gradient(to bottom, orange 10% , blank 70%); // 从高度的10%位置开始渐变,到高度的 70%停止渐变
// 放射性渐变 background: radial-gradient(circle at center top , orange, blank); // 第一个参数 circle | ellipse 圆形 | 椭圆形 // 第二个参数 用at 关键之指定 渐变的起点位置 /** center center center top 顶部 center right center left left top 左上角 right top center bottom bottom left botttom right ... [也可以是像素单位 如:130px 50px] */
// 指定渐变范围 background: linear-gradient (circle closest-side at center top, orange, blank); /** closest-side 可渐变到离着最近的边 farthest-side 可渐变到离着最远的边 closest-corner 可渐变到离着最近的角 fathest-corner 可渐变到离着最远的角 **/
// 兼容写法 background-image: -ms-linear-gradient(top, #fff, #dededc); background-image: -moz-linear-gradient(top, #fff, #dededc); background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dededc)); background-image: -webkit-linear-gradient(top, #fff, #dededc); background-image: -o-linear-gradient(top, #fff, #dededc); background-image: linear-gradient(top, #fff, #dededc);
文本阴影
text-shadow: X-Offset Y-Offset blur color; X-Offset:表示阴影的水平偏移距离,其值为正值时阴影向右偏移,反之向左偏移; Y-Offset:是指阴影的垂直偏移距离,如果其值是正值时,阴影向下偏移,反之向上偏移; Blur:是指阴影的模糊程度,其值不能是负值,如果值越大,阴影越模糊,反之阴影越清晰,如果不需要阴影模糊可以将Blur值设置为0; Color:是指阴影的颜色,其可以使用rgba色。
文本自动换行
文本换行其实是个非常常用但并不起眼的特性。你什么都不用设,浏览器自动就会换行。例如英语,浏览器会根据容器尺寸,选择在半角空格或连字符处换行。例如中文,浏览器会选择在文字或标点符号处换行。但有时遇到长单词或URL浏览器就没这么智能了,会出现撑破容器的现象,很难看,如下图
容器定宽150px的前提下,普通文字如左图浏览器足以胜任自动换行,右图遇见长单词或URL,浏览器就力不从心了。当然,你能为容器设置overflow:auto;,让滚动条出现,以避免撑破容器。或干脆overflow:hidden;让超出部分隐藏,见下图
1、word-wrap 【 overflow-wrap 】 实现断词换行效果如下:(可以解决长单词和url不能换行的问题了)
word-wrap:normal | break-word /* normal: 允许内容顶开或溢出指定的容器边界。 break-word:内容将在边界内换行。如果需要,单词内部允许断行。 ***** CSS3中将 <' word-wrap '> 改名为 <' overflow-wrap '>; */ .test p{ width:100px; border:1px solid #000; background-color:#eee; } .normal p{ word-wrap:normal; overflow-wrap:normal; } .break-word p{ word-wrap:break-word; overflow-wrap:break-word; }
2、word-break 设置浏览器自动换行的方式
word-break:normal | keep-all | break-all *******常用 break-all,break-all显得比较整洁 word-wrap的normal是沿用浏览器默认的换行方式 keep-all 是不换行 word-break的break-all是改变浏览器默认的换行方式,让浏览器无视半角空格,直接根据容器尺寸换行
3、white-space 设置空白符和换行符
white-space:normal | pre | nowrap | pre-wrap | pre-line ****** 常用nowrap,不管你有多少,强制让其一行显示,然后隐藏超出的部分 normal: 默认处理方式。 pre: 用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字超出边界时不换行。可查阅pre对象 nowrap: 强制在同一行内显示所有文本,合并文本间的多余空白,直到文本结束或者遭遇br对象。 pre-wrap: 用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字碰到边界时发生换行。 pre-line: 保持文本的换行,不保留文字间的空白距离,当文字碰到边界时发生换行。
4、word-spacing 单词间隔5、letter-spacing 字符的间隔
6、text-overflow 文本溢出处理
text-overflow:ellipsis;
实例 : 文字溢出时显示为省略号。
div{ width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
服务器字体
// 以 FontAwesome 图标字体库 @font-face{ font-family: 'FontAwesome'; // 字体名 src: url('../fonts/fontawesome-webfont.eot?v=4.7.0'); src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } src 引入字体文件,format属性声明字体格式。每种字体格式对应不同的后缀名 // 使用字体 .fa { font: normal normal normal 14px/1 FontAwesome; }
font-style: italic; 斜体
背景起始位置 background-origin
- 如果背景不是
no-repeat
,这个属性无效,它会从边框开始显示。
background-origin : border-box | padding-box | content-box; // 内边距(默认值)
背景裁剪 background-clip
// background-clip : border-box | padding-box | content-box | no-clip /* 参数分别表示 从边框、或内填充,或者内容区域向外裁剪背景。 no-clip 表示不裁切,和参数border-box显示同样的效果。 backgroud-clip 默认值为border-box。 */
背景大小 background-size
background-size: auto | <长度值> | <百分比> | cover | contain 1、auto: 默认值,不改变背景图片的原始高度和宽度; 2、<长度值>: 成对出现如【200px 50px】,将背景图片宽高依次设置为前面两个值,当设置一个值时,将其作为图片宽度值来等比缩放; 3、<百分比>:0%~100%之间的任何值,将背景图片宽高依次设置为所在元素【宽高乘以前面百分比得出的数值】,当设置一个值时同上; 4、cover:顾名思义为覆盖,即将背景图片【等比缩放】以【填满整个容器】; 5、contain:容纳,即将背景图片 【等比缩放】至某一边紧贴容器边缘为止。
// 不调整尺寸,调整边距 background-image: url(/i/eg_bg_03.gif); background-repeat: space;
// 调整尺寸,不调整边距,满填充 background-image: url(/i/eg_bg_03.gif); background-repeat: round;
背景图片 background-image
// 多背景图片3 background-image: url(flower.png), url('flower-green.png'), url('sky.png'); background-repeat: no-repeat, repeat-x, no-repeat; background-position: 3% 98%, 85%, center center, top;
相关推荐
jiedinghui 2020-05-14
zengni 2019-12-24
CaiKanXP 2019-10-20
沉着前进 2014-07-21
昔人已老 2014-01-05
Phoebe的学习天地 2013-07-02
wangnantjobj 2019-06-21
notepaper 2012-04-01
css教程 2011-08-18
沉着前进 2011-08-18
JenniferMuMu 2011-08-17
葉無聞 2020-04-19
yaodilu 2020-03-08
impress 2020-01-11
zhanghao 2019-12-12
CaiKanXP 2019-11-12
waterv 2019-10-31
zyhui 2018-01-13
沉着前进 2018-02-08