几种常用CSS3样式
2024-08-26 23:11:10
在我们日常工作中,由于考虑到浏览器的兼容性,所以很少用CSS3样式。关于其标准,W3C 仍然在对 CSS3 规范进行开发。不过,现代浏览器已经实现了相当多的 CSS3 属性。最近学习了CSS3,发现功能确实很强大,当然它的内容比较的多,目前我学习到的也是一些基础的内容,下面总结了一下几种我们比较常用的样式。1、如图所示
一个倾斜的图片,有描边有投影,在我们CSS2的时候,可能实现比较麻烦,在css3中就比较容易的实现了,以下是我们所需要的样式:
- div.rotate_img
- {width:200px;
- padding:10px;
- border:1px solid #BFBFBF;
- background-color:white;
- box-shadow:2px 2px 3px #aaaaaa;
- -ms-transform:rotate(7deg); /* IE 9 */
- -moz-transform:rotate(7deg); /* Firefox */
- -webkit-transform:rotate(7deg); /* Safari and Chrome */
- -o-transform:rotate(7deg); /* Opera */
- transform:rotate(7deg);
所用到的CSS3样式有,阴影:box-shadow;图片旋转:transform:rotate(7deg); 其中还有在各个浏览器的写法。值 rotate(7deg); 把元素顺时针旋转 7 度。
这里我们用box-shadow给图片加了一个投影,在CSS3中,新增了text-shadow:文字投影;您能够规定水平阴影、垂直阴影、模糊距离,以及阴影的颜色:
- h1{text-shadow: 5px 5px 5px #FF0000;}
2、 CSS3 圆角边框
在 CSS2 中添加圆角矩形需要技巧。我们必须为每个圆角使用不同的图片。在 CSS3 中,创建圆角是非常容易的。在 CSS3 中,border-radius 属性用于创建圆角: border-radius:10px;
如图
- .demo01{
- border:2px #999 solid;
- border-radius:10px;
- -webkit-border-radius:10px;
- -moz-border-radius:10px;
- width:160px;
- height:120px;
3、CSS3 的过渡
通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。
CSS3 过渡(鼠标指向这)
- .animated_div {
- background: #92B901;
- border-radius: 5px;
- color: #FFFFFF;
- height: 40px;
- opacity: 0.4;
- padding: 20px 10px 0;
- transition-duration: 1s, 1s, 1s, 1s, 1s, 1s;
- transition-property: width, height, transform, background, font-size, opacity;
- width: 65px;
- .animated_div:hover {
- background: #1EC7E6;
- font-size: 16px;
- height: 60px;
- opacity: 1;
- transform: rotate(360deg);
- width: 90px;
最新文章
- 分页实现:Offset-Fetch
- Js/Jquery获取iframe中的元素
- jsp 中 有没有类似java if else语句
- [转]html超链接打开的窗口大小
- MVC重写DefaultModelBinder实现自定义模型绑定
- ubuntu常见错误--could not get lock /var/lib/dpkg/lock -open
- 解决label点击事件触发两次问题
- 教你搭建SpringMVC框架( 更新中、附源码)
- Jquery Ajax方法传值到action
- C# 之屏幕找图
- MongoDB管理与开发精要 书摘
- spring+hibernate+Struts2 整合(全注解及注意事项)
- Java IO (3) - Reader
- javascript取url参数的几种方法
- Codeforces 519E A and B and Lecture Rooms
- winform连接oracle时Oracle.DataAccess.dll版本问题
- unity3d 数据加/解密
- 2019 年 React 学习路线图(转)
- POSIX 线程的创建与退出
- [福大软工] Z班 第11次成绩排行榜
热门文章
- Splash images_enabled 属性
- CopyTransform
- C语言的f(open)函数(文件操作/读写)
- mysql在命令行模式下创建数据库时要显式指定字符集
- shell 获取脚本的绝对路径
- VIM 如何使用系统的剪切板
- Android NDK学习(4)使用cygwin生成.so库文件
- android include标签的使用,在RelativeLayout中使用include标签需注意!!!!!
- Clojure学习之比线性箭头操作
- 2015.7.8js-05(简单日历)