关于CSS的几个属性值

最新推荐文章于 2023-07-13 14:40:18 发布

Lily_sayhi

最新推荐文章于 2023-07-13 14:40:18 发布

阅读量227

点赞数

文章标签： CSS

本文链接：https://blog.csdn.net/Lily_sayhi/article/details/79392917

版权

这篇文章记录遇见的几个神奇的CSS的属性值

1 background-clip:

border-box 背景延伸到边框外沿（但是在边框之下）。

padding-box 边框下面没有背景，即背景延伸到内边距外沿。

content-box 背景裁剪到内容区 (content-box) 外沿。

text 背景被裁剪为文字的前景色。这个最神奇，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		
.clip {
    margin: auto;
    width: 400px;
    height: 300px;
    line-height: 300px;
    text-align: center;
    font-size: 100px;
    font-weight: bold;
    color: transparent;
	background: linear-gradient(0, #009688 0%, yellowgreen 100%);
	background-size: cover;
    background-position: center center;
	-webkit-background-clip: text;
}
		</style>
	</head>
	<body>
		<div class="clip">你的名字</div>
	</body>
</html>

2 换行相关

white-space
    normal: 忽略/合并空白
    pre: 保留空白，如同<pre>的行为
    nowrap: 忽略/合并空白，文本不会换行，直到遇到<br/>
    pre-wrap: 保留空白，但是会正常地进行换行
     pre-line: 忽略/合并空白，但是会正常地进行换行
    inherit: 从父元素继承。
  word-wrap
    normal: 只在允许的断字点换行
    break-word: 在长单词或URL地址内部进行换行
  word-break
    normal:依照亚洲和非亚洲语言的文本规则，允许在单词内换行。
    keep-all:让亚洲语言文本如同非亚洲语言文本那样不允许在任意单词内换行。
    break-all:允许非亚洲语言文本行如同亚洲语言文本那样可以在任意单词内换行。

3 box-sizing: content-box/border-box/inherit

                 content-box——默认值，采用Standard box model
          border-box——采用IE box model
                 inherit——继承父元素属性值

IE box model
IE5.5(怪异模式)采用IE盒子模型，其它将使用W3C标准盒子模型。

width = content-width + padding-width + border-width
height = content-height + padding-height + border-height

Standard box model

width = content-width
height = content-height

Lily_sayhi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于CSS的几个属性值

这篇文章记录遇见的几个神奇的CSS的属性值1 background-clip: border-box 背景延伸到边框外沿（但是在边框之下）。 padding-box 边框下面没有背景，即背景延伸到内边距外沿。 content-box 背景裁剪到内容区 (content-box) 外沿。 text 背景被裁剪为文字的前景色。这个最神奇，代码如下：&...
复制链接

扫一扫