css3中我们不知道的一些属性
1、图片作为边框:border-image;
2、圆角问题:border-radius:上、下、左、右;
3、字体的阴影与自动换行:
阴影:
h1
{text-shadow: 5px 5px 5px #FF0000;} 换行:
p {word-wrap:break-word;}
4、旋转
5、过渡
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 3s, height 3s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
transition: width 3s, height 3s, transform 2s;
} div:hover {
width: 300px;
height: 300px;
-webkit-transform: rotate(10deg); /* Chrome, Safari, Opera */
transform: rotate(10deg);
}
</style>
</head>
<body>
<p><b>注意:</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p> <div>鼠标移动到 div 元素上,查看过渡效果。</div>
</body>
</html>
css3中我们不知道的一些属性的更多相关文章
- JavaScript中你所不知道的Object(二)--Function篇
上一篇(JavaScript中你所不知道的Object(一))说到,Object对象有大量的内部属性,而其中多数和外部属性的操作有关.最后留了个悬念,就是Boolean.Date.Number.Str ...
- CSS3中的counter和content属性,一些简单的内容显示就不需要JS去实现了
HTML的代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www ...
- css3中强大的filter(滤镜)属性
CSS3中强大的filter(滤镜)属性 博主最近在做网站的过程中发现了一个非常强大的CSS3属性,就是filter(滤镜)属性,喜欢p图的朋友看名字都应该知道这是什么神器了吧.当然,这个属性的效果肯 ...
- CSS3中的变形处理(transform)属性
在CSS3中,可以利用transform功能来实现文字或图像的旋转.扭曲.缩放.位移.矩阵.原点这六种类型的变形处理,下面将详细讲解transform的使用. 变形--旋转 rotate() div. ...
- 前端开发 CSS中你所不知道的伪类与伪元素的区别--摘抄
做过前端开发的人都熟悉伪类与伪元素,而真正能够彻底了解这二者的区别的人并不多.伪类与伪元素确实很容易混淆. 伪元素主要是用来创建一些不存在原有dom结构树种的元素,例如:用::before和::aft ...
- CSS3中的skew()属性
刚开始接触CSS3的2D变换属性,就被这个skew()搞的一头雾水,不知道具体是怎么变化的! 研究了一会才发现,CSS3的斜切坐标系和数学中的坐标系完全不一样(设置斜切原点为左上角) <styl ...
- 总结·CSS3中定位模型之position属性的使用方法
一.position元素介绍 position属性规定了元素的定位类型,通过定位,可准确地定义元素相对于其正常位置而应该出现的位置,或者是相对于父元素.另一元素和浏览器窗口等的位置. position ...
- JavaScript中你所不知道的Object(一)
Object实在是JavaScript中很基础的东西了,在工作中,它只有那么贫瘠的几个用法,让人感觉不过尔尔,但是我们真的了解它吗? 1. 当我们习惯用 var a = { name: 'tarol' ...
- KVO中你所不知道的"坑"
一.什么是 KVO 首先让我们了解一下什么KVO,全称为Key-Value Observing,是iOS中的一种设计模式,用于检测对象的某些属性的实时变化情况并作出响应.键值观察Key-Value ...
随机推荐
- 【2018.10.20】noip模拟赛Day3 飞行时间
今天模拟赛题目 纯考输入的傻逼题,用$scanf$用到思想僵化的我最终成功被$if$大法爆$0$了(这题只有一组$100$分数据). 输入后面那个$(+1/2)$很难$if$判断,所以我们要判两个字符 ...
- 洛谷P3143 [USACO16OPEN]钻石收藏家Diamond Collector
题目描述 Bessie the cow, always a fan of shiny objects, has taken up a hobby of mining diamonds in her s ...
- 在 Windows 下用 TDM-GCC(MinGW)开发 DLL 涉及到数据同步锁及 DLL 初始化终止化函数的问题
在 Windows 下用 TDM-GCC(MinGW)开发 DLL 如果要用到数据同步锁,理论上可以采用 Windows API 提供的临界区实现(需要用到的函数有 InitializeCritica ...
- [bzoj1110][POI2007]砝码Odw_贪心
bzoj-1110 POI-2007 砝码Odw 参考博客:http://hzwer.com/4761.html 题目大意:在byteotian公司搬家的时候,他们发现他们的大量的精密砝码的搬运是一件 ...
- PC下ubuntu查找PC串口并加入用户组
1. 查看ttyS0隶属的组:ls -l /dev/ttyS0 //发现隶属于dialout组 输出: crw-rw---- 1 root dialout 4, 64 9月 9 08:23 /d ...
- Chrome 浏览器安装Vue插件方法 (十分详细)
博主最近在研究Vue,无奈新手想安装Chrome的Vue插件,整理下安装流程: 1.首先去github下载vue.zip文件插件(还有npm安装方法这里就不介绍了自行百度)下载地址:https://g ...
- Scrum软件开发
Scrum 什么是Scrum Scrum是迭代式增量软件开发过程,通常用于敏捷软件开发.Scrum包括了一系列实践和预定义角色的过程骨架.Scrum中的主要角色包括同项目经理类似的Scrum主管角色负 ...
- spark学习(六)Java版RDD基本的基本操作
1.map算子 private static void map() { //创建SparkConf SparkConf conf = new SparkConf() .setAppName(" ...
- 全能无线渗透测试工具,一个LAZY就搞定了
近来一直在研究无线安全方面的东西,特别是在无线渗透测试这块,每次渗透测试时总要来回不停的切换操作和挑选利器,很是麻烦.就想看看是否可以有一款功能全面的集合型工具. 正所谓功夫不负有心人,还真有这么一个 ...
- 查询公司外网ip方法
curl -s "http://checkip.dyndns.org/"|cut -f 6 -d" "|cut -f 1 -d"<" ...