css3圆角，建议IE10以上

如果border-radius 单位是百分比，则参考为自身宽高，因此当宽高不一致时，圆角为不规则形状

如果border-radius 为50%，则为椭圆；当宽高一致时，则为正圆

单独设置每个圆角：

四个值： border-radius：左上角 右上角 右下角 左下角

三个值： border-radius：左上角 右上角+左下角  右下角 

两个值： border-radius：左上角+右下角  右上角+左下角

兼容浏览器前缀

谷歌 -webkit-

火狐 -moz-

IE -ms-

欧朋 -o-

气泡对话框

<!DOCTYPE html>

<html lang="en" manifest="index.manifest">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

    div{

        width:500px;

        height:300px;

        border:1px solid #000;

        position: relative;

        font-size:24px;

        line-height: 300px;

        text-align:center;

        -webkit-border-radius:50%;

           -moz-border-radius:50%;

            -ms-border-radius:50%;

             -o-border-radius:50%;

                border-radius:50%;

    }

    div::before,

    div::after{

        content:'';

        display: block;

        position: absolute;

        border:1px solid #000;

        -webkit-border-radius:50%;

           -moz-border-radius:50%;

            -ms-border-radius:50%;

             -o-border-radius:50%;

                border-radius:50%;

    }

    div::before{

        width:50px;

        height:50px;

        right:50px;

        bottom:-25px;

    }

    div::after{

        width:30px;

        height:30px;

        right:25px;

        bottom:-50px;

    }

</style>

</head>

<body>

    <div>这是一段气泡对话框</div>

</body>

</html>

box-shadow:水平偏移  垂直偏移  模糊  扩展  颜色  位置

<!DOCTYPE html>

<html lang="en" manifest="index.manifest">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

    div{

        width: 300px;

        height: 200px;

        background-color: #f0f;

        margin:0 auto;

        box-shadow:10px 10px 5px 0 #bbb;

    }

</style>

</head>

<body>

    <div></div>

</body>

</html>

border-image 欧朋浏览器和IE浏览器不兼容

首先准备border.png

演示效果1：

图片铺满整个边框

<!DOCTYPE html>

<html lang="en" manifest="index.manifest">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

    div{

        width: 300px;

        height: 200px;

        background-color: #f0f;

        margin:0 auto;

        border:30px solid black;

        border-image:url(source/border.png) 30 30 round;

    }

</style>

</head>

<body>

    <div></div>

</body>

</html>

演示效果2：

图片被拉伸来铺满边框

<!DOCTYPE html>

<html lang="en" manifest="index.manifest">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

    div{

        width: 300px;

        height: 200px;

        background-color: #f0f;

        margin:0 auto;

        border:30px solid black;

        border-image:url(source/border.png) 30 30 stretch;

    }

</style>

</head>

<body>

    <div></div>

</body>

</html>

css3神奇的圆角边框、阴影框及其图片边框的更多相关文章

  1. CSS3学习之圆角box-shadow,阴影border-radius

    最近经常玩腾讯微博,出来职业习惯,看看它的CSS,里面运用了大量的css3的东东,有一处用到了Data URI,还有css e­xpression有争议的地方,对png24图片的处理也是用滤镜,类似( ...

  2. PIE使IE浏览器支持CSS3属性（圆角、阴影、渐变）

    http://www.360doc.com/content/12/1214/09/11181348_253939277.shtml PIE使IE浏览器支持CSS3属性(圆角.阴影.渐变) 2012-1 ...

  3. CSS边框（圆角、阴影、背景图片）

    1.圆角  border-radius是向元素添加圆角边框. 使用方法: border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border-radius: 5px 4 ...

  4. 让IE支持Css3属性（圆角、阴影、渐变）

    >>>>>>>>>>>>>>>>>>>>>>>>> ...

  5. CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换

    边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径 垂直半径 border-radius:水平半径/垂直半径 border- ...

  6. 从零开始学 Web 之 CSS3（二）颜色模式，文字阴影，盒模型，边框圆角，边框阴影

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  7. CSS3(1)---圆角边框、边框阴影

    CSS3(1)---圆角边框.边框阴影 CSS3可以简单理解成是CSS的增强版,它的优点在于不仅有利于开发与维护,还能提高网站的性能. 一.圆角边框 圆角在实际开放过程中,还是蛮常见的.以前基本是通过 ...

  8. CSS3学习（圆角、图片、阴影、背景、渐变、文本、字体、2D、3D、过渡等）

    matrix CSS3 1.  圆角 border-radius:边框圆角的圆角半径 四个值:第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角. 三个值:第一个值为左上角, 第二 ...

  9. 从零开始学习前端开发 — 16、CSS3圆角与阴影

    一.css3圆角: border-radius:数值+单位; 1.设置一个值:border-radius:20px; 四个方向圆角都为20px(水平半径和垂直半径相等) 2.设置两个值 border- ...

随机推荐

  1. Kafka动态配置实现原理解析

    问题导读 Apache Kafka在全球各个领域各大公司获得广泛使用,得益于它强大的功能和不断完善的生态.其中Kafka动态配置是一个比较高频好用的功能,下面我们就来一探究竟. 动态配置是如何设计的? ...

  2. Magicodes.IE 2.0发布

    Magicodes.IE 2.0发布 Magicodes.IE是我们维护的开源的导入导出通用库,去年年底已加入NCC开源组织. Github地址:https://github.com/xin-lai/ ...

  3. appcompat_v7 res values-v21 error

    [2014-11-03 11:30:25 - AndroidApp] appcompat_v7/res/values-v21/styles_base.xml:75: error: Error retr ...

  4. Spring基础(二)_面向切面(AOP)

    面向切面编程 面向切面编程[AOP,Aspect Oriented Programming]:通过预编译方式和运行期间动态代理实现程序功能的统一维护的技术.AOP 是 Spring 框架中的一个重要内 ...

  5. hive使用beeline无法登录时的解决办法

    如果参考官方文档执行下列命令,报错: $ $HIVE_HOME/bin/hiveserver2 $ $HIVE_HOME/bin/beeline -u jdbc:hive2://$HS2_HOST:$ ...

  6. Kvm 简介 安装 使用 桥接网络

    KVM 全称是 基于内核的虚拟机(Kernel-based Virtual Machine),它是一个 Linux 的一个内核模块,该内核模块使得 Linux 变成了一个 Hypervisor: 它由 ...

  7. Mysql性能优化全揭秘-庖丁解牛

    「为什么写」 一直想写数据库相关的文章,最直接的原因是数据库这块我们工作中每天都会用到,也是面试求职绕不开的话题,无论你是何种测试,优秀的数据库能力都会非常加分,最近我在总结数据库性能优化这块内容,性 ...

  8. absoulue与relative配合定位盒子居中问题

    如何通过absoulue与relative配合把一个盒子或者是把2个div块同时放到页面中央部分?定位完成后为什么又需要margin-left与margin-top各往回走50%的长度,别忘记用z-i ...

  9. 微信小程序入门笔记-账号注册（1）

    小程序注册 微信小程序开发之前,必须先有小程序账号,下面是注册步骤: 1.打开网页 微信公众平台https://mp.weixin.qq.com/,点击立即注册按钮 2.注册类型 选择小程序开发 3. ...

  10. MySQL - SQL语句优化方法

    1.使用 show status 了解各种 SQL 的执行频率 mysql> show status like 'Com%'; 该命令可以查询 sql 命令的执行次数. 2.定位执行效率较低的 ...