css3中新增的样式使用方法 - jerrylsxu
May 20, 2016 pm 04:50 PM在PC版开发中由于IE原因,我们很少用到css3,但随着平板和智能手机进入我们的生活,以及现在越来越流行,在手机版和平板版开发中我们就可以大胆的使用了,下面我们探讨常用几个css3属性:
1.css3前缀使用介绍,我们直接看个例子:
- -webkit-transform:rotate(-3deg); // 给Chrome和Safari等webkit内核的浏览器使用
- -moz-transform:rotate(-3deg); // 给Firefox浏览器使用
- -ms-transform:rotate(-3deg); // 给IE浏览器使用
- -o-transform:rotate(-3deg); // 给Opera浏览器使用
- transform:rotate(-3deg); // 给支持css3浏览器使用
2.在学习css3属性时第一个肯定会想到圆角,因为css2中要切一张张小图拼接还要大量css代码控制还要考虑兼容很麻烦但是到css3后只要这个属性”border-radius”就能实现圆角,来看一个简单例子:
- border-radius:5px; //设置4个角且圆角半径长度为5px;
- border-top-left-radius:5px; //设置上左第一个角且圆角半径长度为5px;其他使用我们可以参考手册,用起来很简单
3.简单的阴影
让我们从向你展示为网页中的任意元素添加阴影效果是多么的简单开始吧。下面的代码片段将演示一个轻微旋转并有阴影的图片,这两个效果都是使用CSS添加的。
-
"megan.jpg" style="-webkit-transform:rotate(5deg);-webkit-box-shadow:10px 10px 5px #888;" />
上面的代码中,transform CSS 属性实现图片旋转,box-shadow属性为图片添加阴影效果。你可以改变旋转的角度,或者是阴影的参数,仅仅调整那些参数就OK了。
尝试一下,你将看到下面演示的旋转图片效果。
box-shadow可以设置6个参数:
inset:设置对象的阴影类型为内阴影。该值为空时,则对象的阴影类型为外阴影
4.元素变换
刚才我们在阴影介绍中提到transform的使用,下面我们在来看一个例子,鼠标滑过图片放大:
-
"megan.jpg" />
- img { -webkit-transform: scale(0.5); }
- img:hover { -webkit-transform: scale(1); }
鼠标滑过图片,它就会弹出并变大,如下所示。
将鼠标从图片上挪开,图片又会恢复原状。
我们来看一下transform各各参数意思:
- transform:translate(10px,10px) //该元素水平和垂直各移动10个像素
- transform:rotate(10deg) //该元素旋转10度
- transform:scale(2) //该元素放大两倍
- transform:skew(10deg,10deg) //该元素对应X轴和Y轴斜切扭曲10度

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Difficulté à mettre à jour la mise en cache des pages Web officielles du compte: comment éviter l'ancien cache affectant l'expérience utilisateur après la mise à jour de la version?

Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur?

Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez?

Comment ajouter efficacement les effets de course aux images PNG sur les pages Web?

Quel est le but du & lt; mètre & gt; élément?

Quel est le but du & lt; datalist & gt; élément?

Quel est le but du & lt; Progress & gt; élément?

Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive?
