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中我们不知道的一些属性的更多相关文章

  1. JavaScript中你所不知道的Object(二)--Function篇

    上一篇(JavaScript中你所不知道的Object(一))说到,Object对象有大量的内部属性,而其中多数和外部属性的操作有关.最后留了个悬念,就是Boolean.Date.Number.Str ...

  2. CSS3中的counter和content属性,一些简单的内容显示就不需要JS去实现了

    HTML的代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www ...

  3. css3中强大的filter(滤镜)属性

    CSS3中强大的filter(滤镜)属性 博主最近在做网站的过程中发现了一个非常强大的CSS3属性,就是filter(滤镜)属性,喜欢p图的朋友看名字都应该知道这是什么神器了吧.当然,这个属性的效果肯 ...

  4. CSS3中的变形处理(transform)属性

    在CSS3中,可以利用transform功能来实现文字或图像的旋转.扭曲.缩放.位移.矩阵.原点这六种类型的变形处理,下面将详细讲解transform的使用. 变形--旋转 rotate() div. ...

  5. 前端开发 CSS中你所不知道的伪类与伪元素的区别--摘抄

    做过前端开发的人都熟悉伪类与伪元素,而真正能够彻底了解这二者的区别的人并不多.伪类与伪元素确实很容易混淆. 伪元素主要是用来创建一些不存在原有dom结构树种的元素,例如:用::before和::aft ...

  6. CSS3中的skew()属性

    刚开始接触CSS3的2D变换属性,就被这个skew()搞的一头雾水,不知道具体是怎么变化的! 研究了一会才发现,CSS3的斜切坐标系和数学中的坐标系完全不一样(设置斜切原点为左上角) <styl ...

  7. 总结·CSS3中定位模型之position属性的使用方法

    一.position元素介绍 position属性规定了元素的定位类型,通过定位,可准确地定义元素相对于其正常位置而应该出现的位置,或者是相对于父元素.另一元素和浏览器窗口等的位置. position ...

  8. JavaScript中你所不知道的Object(一)

    Object实在是JavaScript中很基础的东西了,在工作中,它只有那么贫瘠的几个用法,让人感觉不过尔尔,但是我们真的了解它吗? 1. 当我们习惯用 var a = { name: 'tarol' ...

  9. KVO中你所不知道的"坑"

      一.什么是 KVO 首先让我们了解一下什么KVO,全称为Key-Value Observing,是iOS中的一种设计模式,用于检测对象的某些属性的实时变化情况并作出响应.键值观察Key-Value ...

随机推荐

  1. ajax同步导致ajax上面的代码不执行?

    js代码:环境:IE11要求:点击一个按钮后,页面xxx的地方立即显示"开始处理...",直到ajax处理结束后,xxx内容才更新为新的处理结果:点击事件执行代码如下:xxx.in ...

  2. cf725F Family Photos

    Alice and Bonnie are sisters, but they don't like each other very much. So when some old family phot ...

  3. 在 Linux 实例上自动安装并运行 VNC Server

    原文网址:https://help.aliyun.com/knowledge_detail/41181.html?spm=5176.8208715.110.11.4c184ae8mlC7Yy 您可以使 ...

  4. openssl搭建双向认证https

    http://www.barretlee.com/blog/2015/10/05/how-to-build-a-https-server/ http://blog.163.com/fangjinbao ...

  5. [Bzoj3172][Tjoi2013]单词(fail树)

    3172: [Tjoi2013]单词 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 4777  Solved: 2345[Submit][Status ...

  6. 动态规划—最长回文子串LEETCODE第5题深度剖析

    动态规划对于笔者来说有很重要的意义 一.题目如下: 对于此类题目,笔者常用的的办法是先做个暴力解题思路,然后再对暴力法进行优化. 二.暴力法 //字串遍历 public static String l ...

  7. Hadoop安装和基本单机部署

    下载安装  # 下载 $ cd /usr/local $ wget http://mirrors.hust.edu.cn/apache/hadoop/common/hadoop-2.9.2/hadoo ...

  8. Xib/Storyboard碰到不同版本的Xcode真是想死啊!

    Command /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/usr/ ...

  9. Oracle版本–EBS R12.1.1

    select * from v$version; Oracle Database 11g Enterprise Edition Release 11.1.0.7.0 - 64bit Productio ...

  10. BroadcastReceiver详解(二)

    BroadCastReceiver 简介 (末尾有源码) BroadCastReceiver 源码位于: framework/base/core/java/android.content.Broadc ...