CSS3 新增的属性

最新推荐文章于 2024-06-05 22:45:58 发布

zhangxuding

最新推荐文章于 2024-06-05 22:45:58 发布

阅读量127

点赞数

分类专栏： CSS学习

本文链接：https://blog.csdn.net/zhangxuding/article/details/84855136

版权

CSS学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1 CSS3 边框（引用http://www.w3school.com.cn/css3/css3_border.asp）
通过 CSS3，您能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框
border-radius：创建圆角边框 box-shadow 添加阴影 border-image 使用图片来绘制边框
div
{
border-radius:25px;
}
div
{
box-shadow: 10px 10px 5px #888888;
}
div
{
border-image:url(border.png) 30 30 round;
}


<!DOCTYPE html>
<html>
<head>
<style> 
div
{
text-align:center;
border:2px solid #a1a1a1;
padding:10px 40px; 
background:#dddddd;
width:350px;
border-radius:25px;
}
</style>
</head>
<body>

<div>border-radius 属性允许您向元素添加圆角。</div>

</body>
</html>

2 CSS3 背景
属性描述 CSS
background-clip 规定背景的绘制区域。
background-origin 规定背景图片的定位区域。(放置于 content-box、padding-box 或 border-box)
background-size 规定背景图片的尺寸。

3 CSS3 文本效果 CSS3 包含多个新的文本特性。
3.1 text-shadow 文本应用阴影
选项依次是水平阴影、垂直阴影、模糊距离，以及阴影的颜色：

  h1 { text-shadow: 5px 5px 5px #FF0000; }

3.2 word-wrap 属性允许您允许文本强制文本进行换行即使这意味着会对单词进行拆分：

 
<!DOCTYPE html>
<html>
<head>
<style> 
p.test
{
width:11em; 
border:1px solid #000000;
word-wrap:break-word;
}
</style>
</head>
<body>

<p class="test">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>

</body>
</html>

3.4 @font-face 规则(引用 http://www.w3school.com.cn/css3/css3_font.asp)
定义指定的字体

4 CSS3 转换，可以使用 2D 或 3D 转换来转换您的元素。（引用http://www.w3school.com.cn/css3/css3_2dtransform.asp）
通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。

4.1 translate()：通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）位置参数：
4.2 rotate()：通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
div
{
transform: rotate(30deg); //旋转30度允许负值，元素将逆时针旋转。
}
4.3 scale()
通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：
值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。
div
{
transform: scale(2,4);
}
4.4 skew()
通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：
值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度


<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
transform:skew(30deg,20deg);
}
</style>
</head>
<body>

<div>你好。这是一个 div 元素。</div>

<div id="div2">你好。这是一个 div 元素。</div>

</body>
</html>

5 CSS3 过渡
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：规定您希望把效果添加到哪个 CSS 属性上规定效果的时长


<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s, height 2s;  //应用于g高 宽度属性的过渡效果，时长为 2 秒

}

div:hover
{
width:200px;
height:200px;
transform:rotate(180deg);//旋转180度

}
</style>
</head>
<body>

<div>请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。</div>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>
</html>

6 CSS3 多列 (引用http://www.w3school.com.cn/css3/css3_multiple_columns.asp)
通过 CSS3，您能够创建多个列来对文本进行布局 - 就像报纸那样！
column-count ：column-count 属性规定元素应该被分隔的列数：
column-gap：column-gap 属性规定列之间的间隔
column-rule：column-rule 属性设置列之间的宽度、样式和颜色规则。

zhangxuding

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 新增的属性

1 CSS3 边框（引用http://www.w3school.com.cn/css3/css3_border.asp）通过 CSS3，您能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框 border-radius：创建圆角边框 box-shadow 添加阴影 border-image 使用图片来绘制边框div{ border-radius:25px; }...
复制链接

扫一扫

专栏目录