css3
Posted yuyuanwen
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css3相关的知识，希望对你有一定的参考价值。
一：CSS3 圆角
border-radius 属性是一个最多可指定四个 border -*- radius 属性的复合属性
注意： 这个属性允许你为元素添加圆角边框！
CSS3 border-radius - 指定每个圆角
如果你在 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。
但是，如果你要在四个角上一一指定，可以使用以下规则：
- 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
- 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
- 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
- 一个值： 四个圆角值相同
二：CSS3 背景
1. background-size 属性：background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。
您可以指定像素或百分比大小。你指定的大小是相对于父元素的宽度和高度的百分比的大小。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>background-size</title> 6 <style> 7 body 8 9 background:url(/try/demo_source/img_flwr.gif); 10 background-size:80px 60px; 11 background-repeat:no-repeat; 12 padding-top:40px; 13 14 </style> 15 </head> 16 <body> 17 <p> 18 Lorem ipsum，中文又称“乱数假文”， 是指一篇常用于排版设计领域的拉丁文文章 ，主要的目的为测试文章或文字在不同字型、版型下看起来的效果。 19 </p> 20 21 <p>原始图片: <img src="/try/demo_source/img_flwr.gif" alt="Flowers" width="224" height="162"></p> 22 23 </body> 24 </html>
效果图;
2.CSS3的background-Origin属性:background-Origin属性指定了背景图像的位置区域。content-box, padding-box,和 border-box区域内可以放置背景图像。
3.CSS3 background-clip属性：CSS3中background-clip背景剪裁属性是从指定位置开始绘制
三：CSS3 文本效果
1.CSS3 的文本阴影：CSS3 中，text-shadow属性适用于文本阴影。
2.CSS3 box-shadow属性：CSS3 中 CSS3 box-shadow 属性适用于盒子阴影
3.CSS3 text-overflow 属性：text-overflow属性指定当文本溢出包含它的元素，应该发生什么。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>菜鸟教程(runoob.com)</title> 6 <style> 7 div.test 8 9 white-space:nowrap; 10 width:12em; 11 overflow:hidden; 12 border:1px solid #000000; 13 14 </style> 15 </head> 16 <body> 17 18 <p>以下 div 容器内的文本无法完全显示，可以看到它被裁剪了。</p> 19 <p>div 使用 "text-overflow:ellipsis":</p> 20 21 <div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div> 22 <p>div 使用 "text-overflow:clip":</p> 23 <div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div> 24 <p>div 使用自定义字符串 "text-overflow: >>"(只在 Firefox 浏览器下有效):</p> 25 <div class="test" style="text-overflow:‘>>‘;">This is some long text that will not fit in the box</div> 26 </body> 27 </html>
效果：
四：CSS3 transform 属性
一：2D 转换
1.translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
2.rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
3.scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：
4.skew() 方法：包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
skewX(<angle>);表示只在X轴(水平方向)倾斜。
skewY(<angle>);表示只在Y轴(垂直方向)倾斜。
5.matrix()方法和2D变换方法合并成一个。matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
二：3
五：CSS3 过渡
transition 属性设置元素当过渡效果，四个简写属性为：
- transition-property：
- transition-duration
- transition-timing-function
- transition-delay
以上是关于css3的主要内容，如果未能解决你的问题，请参考以下文章