记一些不太常用但很有用的CSS3新特性

选择器

  • el[attribute^=value]: 选择某元素attribute属性是以value开头的。
  • el[attribute$=value]: 选择某元素attribute属性是以value结尾的。
  • el[attribute*=value]: 选择某元素attribute属性包含value字符串的。
  • element1~element2: 选择前面有element1元素的每个element2元素。
  • el:only-of-type: 选择属于其父元素唯一的el元素的每个el元素。
  • el:only-child: 选择属于其父元素的唯一子元素的每个el元素。
  • :root: 选择文档的根元素。
  • el:empty: 选择没有子元素的每个el元素(包括文本节点)。
  • el:target: 选择当前活动的el元素。
  • el:not(selector): 选择非selector元素的每个元素。
  • el::selection: 选择被用户选取的元素部分。

背景

  • background-clip
    规定背景的绘制区域
div {
  background-color: yellow;
  background-clip: content-box | border-box | padding-box;
}
  • background-origin
    规定背景的的起始位置,用法跟background-clip一样,但是有差别,其中一个差别是:background-clip的值为border-box时,背景并不会被边框覆盖,但background-origin则相反。
div {
  background-color: yellow;
  background-origin: content-box | border-box | padding-box;
}
/*需要注意的是,值为border-box时需要边框是透明的,否则会覆盖住背景的边界位置*/

文字效果

  • word-wrap
    强制文本换行 (英文文本需谨慎使用,会直接断开单词) ,元素需为块级元素。
p {
  word-wrap: normal | break-word;
}
/* normal: (默认值)只在允许的断字点换行 */
/* break-word:  在长单词或 URL 地址内部进行换行 */
  • word-break
    用于处理单词折断
p {
  word-break: normal | break-word | break-all | keep-all;
}
/* normal: 默认换行规则 */
/* break-word: 保持单词或URL的完整性,即不在内部换行 */
/* break-all:  在长单词或 URL 地址内部进行换行 */
/* keep-all: 只能在半角空格或连字符处换行。*/
  • text-fill-color
    设置文字内部填充颜色
  • text-stroke-color
    设置文字边界填充颜色
  • text-stroke-width
    设置文字边界宽度

多列布局

通过CSS3,能够创建多个列来对文本进行布局,IE10和Opera支持多列属性。Firefox 需要前缀-moz-,Chrome和Safari需要前缀-webkit-。主要有如下三个属性:
1.column-count: 规定元素应该被分隔的列数。
2.column-gap: 规定列之间的间隔。
3.column-rule: 设置列之间的宽度、样式和颜色规则

div {
  -moz-column-count:3; /* Firefox */
  -webkit-column-count:3; /* Safari 和 Chrome */
  column-count:3;
  -moz-column-gap:40px; /* Firefox */
  -webkit-column-gap:40px; /* Safari 和 Chrome */
  column-gap:40px;
  -moz-column-rule:3px outset #ff0000; /* Firefox */
  -webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */
  column-rule:3px outset #ff0000;
}

用户界面

  • resize
    resize 属性规定是否可由用户调整元素尺寸。如果希望此属性生效,需要设置元素的 overflow 属性
div {
  resize:  none | both | horizontal | vertical;
  overflow: auto;
}
  • outline-offset
    outline-offset属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓,与outline配合使用。IE和Opera暂不支持该属性
div {
  margin:20px;
  width:150px;
  padding:10px;
  height:70px;
  border: 1px solid #333;
  outline: 2px solid red;
  outline-offset: 15px;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 选择器 CSS3中新添加了很多选择器,解决了很多之前需要用javascript才能解决的布局问题。· elemen...
    lovelydong阅读 495评论 0 2
  • HTML5 1.HTML5新元素 HTML5提供了新的元素来创建更好的页面结构: 标签描述 定义页面独立的内容区域...
    L怪丫头阅读 2,840评论 0 4
  • 1.CSS3 边框 border-radius CSS属性用来设置边框圆角。当使用一个半径时确定一个圆形;当使用两...
    garble阅读 695评论 0 0
  • 总览 边框border-color 属性boder-image 属性border-radius 属性box-sha...
    DecadeHeart阅读 1,036评论 0 9
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,810评论 0 2