首页 > 代码库 > css背景-边框-文本

css背景-边框-文本

2024-11-19 21:39:02   202人阅读

 

一、CSS3背景

属性列表

  • background
  • background-color
  • background-image
  • background-repeat
  • background-attatchment
  • background-position
  • background-origin
  • background-clip
  • background-size

1.CSS3背景原点属性

  • background-origin
  • 设置或检索对象的背景图像计算background-position时的参考原点位置
  • IE8 Firefox3.5不支持

  • 值：

    • padding-box:默认值，从padding区域（含padding）开始显示背景图像
    • border-box:从border区域（含border）开始显示背景图像

    • content-box:从content(文字)区域开始显示背景图像

    • eg:background:url("../../dist/images/avatar.jpg") no-repeat;
      background-origin:padding-box

2.CSS3裁切属性

  • background-clip
  • 设置对象的背景图像向外裁剪的区域
  • IE8 Firefox3.5不支持
  • 值：
    • padding-box:从padding区域（不含padding）开始向外裁剪背景。
    • border-box:默认值,从border区域（不含border）开始向外裁剪背景
    • content-box:从content区域开始向外裁剪背景
    • text:加私有前缀-webkit-从前景内容的形状（比如文章）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果(图片显示在文字上,需要设color:transparent)

3.CSS3背景尺寸属性

  • background-size
  • 检索或设置对象的背景图像的尺寸大小
  • 如果提供两个，第一个用于定义背景图像的宽度，第二个用于定义背景图像的高度。
  • 如果只提供一个，该值将用于定义背景图像的宽度，第2个值默认为auto,即高度为auto,此时背景图以提供的宽度作为参照来进行等比缩放
  • 值：
    • length:用长度值指定背景图像大小。不允许负值。
    • percentage：用百分比指定背景图像大小。不允许负值。
    • auto:背景图像的真实大小
    • cover:将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器
    • contain:将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

4.CSS3多背景属性

  • background：

  • 值：

    background-image:url("../../dist/images/bg-tl.png"), 
                url("../../dist/images/bg-tr.png"), 
                url("../../dist/images/bg-bl.png"),
                url("../../dist/images/bg-br.png");
background-repeat:no-repeat;
background-position:0px 0px, 100% 0px, 0px 100%, 100% 100%;


background: url("../../dist/images/bg-tl.png") no-repeat 0px 0px, 
            url("../../dist/images/bg-tr.png") no-repeat 100% 0px,
            url("../../dist/images/bg-bl.png") no-repeat 0px 100%,
            url("../../dist/images/bg-br.png") no-repeat 100% 100%;

二、CSS3边框

1.直角边框

  • border
  • border-width
  • border-style
  • border-color
  • border-left
  • border-right
  • border-top
  • border-bottom2.圆角边框

  • border-radius

      • 　　border-top-left-radius
      • 　　border-top-right-radius
      • 　　border-bottom-right-radius

      • 　　border-bottom-left-radius

3.盒子阴影

  • box-shadow
  • 可以同时设置多组阴影，每组参数值用逗号分隔
  • 值none:没有阴影
  • box-shadow：水平    垂直    模糊度（必须写在颜色前面） 阴影外延宽度  颜色   内阴影（inset）默认为外阴影

4.图片边框

  • border-image
    • 复合属性，设置或检索对象的边框样式使用图像来填充
  • border-image-source
    • 设置或检索对象的边框样式使用图像路径
    • 值url
  • border-image-slice
    • 设置或检索对象的边框背景图的分割方式（设置的是每个角）
    • 值：浮点数/百分比
  • border-image-width
    • 设置或检索对象的边框厚度
    • 值：长度值/百分比/浮点数
  • border-image-outset
    • 设置或检索对象的边框背景图的扩展，往外蔓延,不占用位置
    • 长度值/浮点数（不允许负值）

  • border-image-repeat

    • 设置或检索对象的边框图像的平铺方式
    • 值
      • stretch:指定用拉伸方式来填充边框背景图（默认值）
      • repeat:指定用平铺方式来填充边框背景图。当图片碰到边界时，如果超过则被截断
      • round:指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框
      • space:指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的之间的间距直至正好可以铺满整个边框。 综合写：border-image:source slice/width/outset repeat 例如： border-image-slice:27; border-image-repeat:space; border-image:url("imgs/avatar.jpg") 33%/50px/10px stretch;

      • border-colors

5.盒子倒影

  • box-reflect
  • 只有谷歌可以用，加私有前缀-webkit-
  • IE Firefox不支持

  • -webkit-box-reflect:none|direction offset 遮罩

    • direction值：above below left right

    • offset值：

      • length长度表示，来定义倒影与对象之间的间隔，可以为负值
      • percentage:用百分比来定义倒影与对象之间的间隔。可以为负值

    • 遮罩值

      • none:无遮罩图像
      • URL：指定遮罩图像
      • linear-gradient:使用线性渐变创建遮罩图像
      • radial-gradient：使用径向渐变创建遮罩图像
      • repeating-linear-gradient:使用重复的线性渐变创建背遮罩像。
      • repeating-radial-gradient:使用重复的径向渐变创建 eg:background:url("../../dist/images/2.jpg"); background-size:100% 100%; -webkit-box-reflect:below 3px -webkit-linear-gradient(transparent, #fff);

三、CSS3文本

1.CSS3文本阴影属性

  • text-shadow
  • 设置或检索对象中文本的文字是否有阴影及模糊效果，参考box-shadow属性
  • 可以设定多组效果，每组参数值以逗号分隔。多组阴影特殊效果，Demo:火焰文字，霓虹文字
  • IE6~9 Firefox不支持，
  • text-shadow:none|长度1 长度2 长度3 color
    • none：不设置阴影
    • 长度1：设置对象的阴影水平偏移值。可以为负值
    • 长度2：设置对象的阴影垂直偏移量。可以为负值
    • 长度3：设置对象的阴影模糊值。不允许负值
    • color:对象的阴影颜色 例如： text-shadow:1px 0px 0px rgb(188,188,188), 2px 0px 0px rgb(177,177,177), 3px 0px 0px rgb(166,166,166), 4px 0px 0px rgb(155,155,155), 5px 0px 0px rgb(144,144,144);

2.CSS3溢出文本属性

  • text-overflow
  • 当块容器overflow为非visible时，定义内联内容溢出其块容器是否截断或者添加...及自定义字符
  • IE6~9 Firefox不支持
  • 值：
    • clip：默认值，当内联内容溢出块容器时，将溢出部分裁切掉
    • ellipsis:当内联内容溢出块容器时，将溢出部分替换为...
  • 要使得text-overflow有效，必须有以下前提条件:
    • 1.overflow:hidden;
    • 2.white-space:nowrap;
    • 3.width为非auto值 例如： p:nth-of-type(6){ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }

3.CSS3文本换行

  • word-wrap
    • 设置或检索当内容超出指定容器的边界时是否换行
    • CSS3将word-wrap改名为overflow-wrap
    • 值：
      • normal:允许内容顶开或溢出指定的容器边界
      • break-word:内容将在边界内换行。如果需要，单词内部允许断行

  • word-break

    • 设置或检索对象内文本的字内换行行为
    • 对于解决防止页面中出现连续无意义的长字符打破布局，应该使用break-all属性值；

    • 值：

      • normal:依照亚洲语言和非亚洲语言的文本规则，允许在字内换行。
      • keep-all:亚洲文本不断行，英文也不断行，与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。

      • break-all:亚洲文本和英文都断行，该行为与亚洲语言的normal相同。也允许非亚洲语言文本行内的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本，比如使连续的英文字母间断开。

        对比：
word-wrap:单词太长会提前换行
word-break:单词太长不会提前换行，而是在超出范围时，把单词截断换行
  • white-space
    • 设置或检索对象内空格的处理方式
    • 值：
      • normal：默认处理方式
      • pre:用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字超出边界时不换行
      • nowrap:强制在同一行内显示所有文本，合并文本间的多余空白，直到文本结束或者遭遇br对象
      • pre-wrap:用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行
      • pre-line:保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行

4.CSS3文本装饰

  • text-decoration

  • text-decoration-line

    • 值：
    • none:指定文字无装饰
    • underline:指定文字的装饰是下划线
    • overline:指定文字的装饰是上划线
    • line-through:指定文字的装饰是贯穿线
    • blink:指定文字的装饰是闪烁

  • text-decoration-style

    • 文本装饰线条的形状
    • 值：
    • solid：实线
    • double：双线
    • dotted：点状线
    • dashed：虚线
    • wavy：波浪线

  • text-decoration-color

    • 文本装饰线条的颜色

  • text-decoration-skip

    • 文本装饰线条必须略过内容中的哪些部分

  • text-underline-position

    • 设置对象中的下划线的位置

5.CSS3文本描边（仅Webkit）

  • text-fill-color

    • 指定文字的填充颜色

  • text-stroke

    • 指定文字的描边
    • text-stroke：width||color
  • text-strokw-width
    • 指定文字的描边厚度
  • text-stroke-color
    • 指定文字的描边颜色

6.其他文本属性

  • text-transform
    • 设置或检索对象中的文本的大小写
    • IE6~11 Firefox2~18 Chrome4~45 Safari6~8 Opera15~29不支持
    • 值
      • none：无转换
      • capitalize：将每个单词的第一个字母转换成大写
      • uppercse：将每个单词转换成大写
      • lowercase：将每个单词转换成小写
      • full-width：将所有字符转换成fullwidth形式。如果字符没有相应的fullwidth形式，将保留原样

  • tab-size

    • 检索或设置对象中的制表符的长度
    • Firefox4~40 Chrome21+ Safari6.1+ Opera支持

    • 该属性决定了制表符（U+0009)的宽度，整数代表空格(U+0020)的倍数

      • 如：tab-size:4(表示制表符宽度是4个空格的宽度)

    • 只有当white-space的属性值为：pre|pre-wrap时，该属性的定义才有效

      • integer:用整数指定制表符的长度。不允许负值
      • length:用长度值指定制表符的长度。不允许负值
  • text-align
    • 设置或检索对象中内容的水平对齐方式
    • 块级元素的文本是一些堆叠的线框
    • 大部分浏览器要使得text-align的justify两端对齐生效，需要在汉字间插入有空白，如空格
    • 快内的最后一行文本，及被强制打断的行，其两端对齐需使用text-align-last
    • IE浏览器下，如果text-align-last要生效，必须先定义text-align为justify
    • 值：
      • left:内容左对齐
      • center:居中对齐
      • right:右对齐
      • justify:（浏览器不支持）两端对齐，但对于被强制打断的行及最后一行，包括仅有一行文本的情况，不做处理。
      • start:内容对齐开始边界
      • end:内容对齐结束边界
      • match-parent：（浏览器不支持）这个值和inherit表现一致，只是该值继承的start或end关键字是针对父母的direction值并计算的，计算值可以是left和right
      • justify-all:效果等同于justify,但还会让最后一行也两端对齐，

  • text-align-last

    • 只有TE6.0+ Firefox12~37支持
    • 设置或检索一个块内的最后一行（包括块内仅有一行文本的情况，这时既是第一行也是最后一行）或者被强制打断的行的对齐方式

  • text-justify

    • 设置或检索对象内调整文本使用的对齐方式
    • 只有IE6~11支持
    • 因为这个属性影响文本布局，所以text-align必须被设置为justify

  • text-size-adjust

    • 检索或设置移动端页面中对象文本的大小调整
    • 该属性只在移动设备上生效
    • 只有iOS Safari支持
    • 如果页面没有定义meta viewport ,此属性定义无效
    • 值：
      • auto:文本大小根据设备尺寸进行调整
      • none:文本大小不会根据设备尺寸进行调整·
      • percentage:用百分比来指定文本大小在设备尺寸不同的情况下如何调整。

css背景-边框-文本


联系
我们