CSS3中新增功能

最新推荐文章于 2022-05-12 22:54:43 发布

零点起航

最新推荐文章于 2022-05-12 22:54:43 发布

阅读量732

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/csyuyaoxiadn/article/details/8658953

版权

web前端专栏收录该内容

32 篇文章 0 订阅

订阅专栏

1.........图片旋转属性transform

<style>

div{

width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2{
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(20deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */
}

</style>

效果

2.............CSS3 边框

border-radius：属性用于创建圆角
box-shadow：属性用于向方框添加阴影，设置的颜色是阴影的颜色
border-image：属性用于使用图片来创建边框

各浏览器对边框效果的支持情况

Internet Explorer 9 支持 border-radius 和 box-shadow。

Firefox 支持所有新的边框属性。

Chrome 和 Safari 支持 border-radius 和 box-shadow，但是对 border-image 的支持需要前缀 -webkit-。

Opera 支持 border-radius 和 box-shadow，但是对 border-image 的支持需要前缀 -o-。

border-radius eg:

div{
text-align:center;
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:350px;
border-radius:25px;
-moz-border-radius:25px; /* 老的 Firefox */
}

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

效果：

div{
width:300px;
height:100px;
background-color:#ff9900;
-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
box-shadow: 10px 10px 5px #888888; /*顺序左、下、右、上，如果只规定了3个默认的没有上部阴影；后面对应阴影的颜色*/
}

效果：

border-image css代码：

div
{
border:15px solid transparent;
width:300px;
padding:10px 20px;
}

#round
{
-moz-border-image:url(/i/border.png) 30 30 round; /* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 round;/* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 round; /* Opera */
border-image:url(/i/border.png) 30 30 round;/*30、30表示四个边都是30（前面表示左右，后面表示上下），默认顺序上、右、下、左，数越大图片排的越多；当省略round、stretch时，默认是stretch*/
}

#stretch
{
-moz-border-image:url(/i/border.png) 30 30 stretch;/* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 stretch;/* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 stretch; /* Opera */
border-image:url(/i/border.png) 30 30 stretch;
}

效果：

3.............CSS3 背景

background-size：属性规定背景图片的尺寸（您能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。）
background-origin:属性规定背景图片的定位区域。

浏览器支持情况

background-size使用：

body{
background:url(/i/bg_flower.gif);
background-size:63px 100px;
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-repeat:no-repeat;
padding-top:80px;
}

<body>
<p>上面是缩小的背景图片。</p>
<p>原始图片：<img src="/i/bg_flower.gif" alt="Flowers"></p>

</body>

效果：

background-origin示例

div
{
border:1px solid black;
padding:35px;
background-image:url('/i/bg_flower.gif');
background-repeat:no-repeat;
background-position:left;
}
#div1
{
background-origin:border-box;
}
#div2
{
background-origin:content-box;
}
</style>
</head>
<body>

<p>background-origin:border-box:</p>
<div id="div1">
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
</div>

<p>background-origin:content-box:</p>
<div id="div2">
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
</div>

效果：

零点起航

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3中新增功能

1.........图片旋转属性transform div{width:100px;height:75px;background-color:yellow;border:1px solid black;}div#div2{transform:rotate(30deg);-ms-transform:rotate(30deg); /* IE 9 */-m
复制链接

扫一扫