参考：http://www.w3school.com.cn/css3/css3_border.asp

　　

  • 圆角边框
<!DOCTYPE html>

<html>

<head>

<style>

div

{

text-align:center;

border:2px solid #a1a1a1;

padding:10px 40px;

background:#dddddd;

width:350px;

border-radius:15px;

-moz-border-radius:15px; /* 老的 Firefox */

}

</style>

</head>

<body>

<div>border-radius 属性允许您向元素添加圆角。</div>

</body>

</html>

效果：

  • 边框阴影
<!DOCTYPE html>

<html>

<head>

<style>

div

{

width:300px;

height:100px;

background-color:#ff9900;

-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */

box-shadow: 10px 10px 5px #888888;

}

</style>

</head>

<body>

<div></div>

</body>

</html>

效果：

  • 边框图片
<!DOCTYPE html>

<html>

<head>

<style>

div

{

border:15px solid transparent;

width:300px;

padding:10px 20px;

}

#round

{

-moz-border-image:url(/i/border.png) 30 30 round;    /* Old Firefox */

-webkit-border-image:url(/i/border.png) 30 30 round;    /* Safari and Chrome */

-o-border-image:url(/i/border.png) 30 30 round;        /* Opera */

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

}

#stretch

{

-moz-border-image:url(/i/border.png) 30 30 stretch;    /* Old Firefox */

-webkit-border-image:url(/i/border.png) 30 30 stretch;    /* Safari and Chrome */

-o-border-image:url(/i/border.png) 30 30 stretch;    /* Opera */

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

}

</style>

</head>

<body>

<div id="round">在这里，图片铺满整个边框。</div>

<br>

<div id="stretch">在这里，图片被拉伸以填充该区域。</div>

<p>这是我们使用的图片：</p>

<img src="/i/border.png">

</body>

</html>

使用的图片：

效果：

新的边框属性

属性 描述 CSS
border-image 设置所有 border-image-* 属性的简写属性。 3
border-radius 设置所有四个 border-*-radius 属性的简写属性。 3
box-shadow 向方框添加一个或多个阴影。 3

CSS笔记（十一）CSS3之边框的更多相关文章

  1. css笔记——区分css3中的transform transition animation

    出处:http://blog.csdn.net/dyllove98/article/details/8957232   CSS3中和动画有关的属性有三个  transform. transition  ...

  2. animate.css –齐全的CSS3动画库--- 学习笔记

    animate.css – 齐全的CSS3动画库 学习网站: https://daneden.github.io/animate.css/ http://www.dowebok.com/98.html ...

  3. CSS3 border-radius边框圆角

    在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...

  4. css中的背景、边框、补丁相关属性

    css中的背景.边框.补丁相关属性 关于背景涉及到背景颜色与背景图片 背景颜色background-color即可设定: 背景图片background-image即可设定: 但是背景图片还涉及到其他的 ...

  5. css重点章节复习—布局-边框-边距-浮动 (部分)

    css重点章节复习—布局-边框-边距-浮动 在第二个任务中,这一块的后面那条线真的弄了很久.起初也是在html里面写的代码.之后觉得这样不好,想到第一个页面中用到的border-bottom和bord ...

  6. CSS3之边框图片border-image

    CSS3中有关border的属性,还有很多,今天我将为大家介绍一个很好玩的属性——Border-image.有了CSS3之边框图片Border-image,我们可以轻松搞定圆角,轻松搞定很多之前难搞的 ...

  7. 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果

    原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...

  8. HTML+CSS笔记 CSS笔记集合

    HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...

  9. css3(border-radius)边框圆角详解（转）

    css3(border-radius)边框圆角详解 (2014-05-19 16:16:29) 转载▼ 标签: divcss html it css3 分类: 网页技术 传统的圆角生成方案,必须使用多 ...

  10. css3圆角边框

    圆角边框 一.border-radius属性简介   为元素添加圆角边框,可以对元素的四个角进行圆角设置(属性不具有继承性) 二.border-radius定义方法 border-radius属性有两 ...

随机推荐

  1. Access数据库导入到SQL Server 2005 Express中

    安装好SQL Server 2005 Express后,再安装SQL Server Management Studio Express CTP就可以很方便的使用控制台进行数据库的管理.但SQL Ser ...

  2. React笔记_(2)_react语法1

    这一节内容主要以了解为主. 渐渐的体会react的语法和其特性. ① htmlAndJs 混合编写 react和以往的前后台书写方式不一样. 在之前的多个语言中,讲求的是将页面代码和js代码逻辑分开, ...

  3. 数32位 unsigned int中1的个数

    参考文章:http://www.cnblogs.com/graphics/archive/2010/06/21/1752421.html 最简单的方法: int BitCount0(unsigned ...

  4. eclispse快捷操作

    1几个最重要的快捷键 代码助手:Ctrl+Space(简体中文操作系统是Alt+/)快速修正:Ctrl+1单词补全:Alt+/打开外部Java文档:Shift+F2 显示搜索对话框:Ctrl+H快速O ...

  5. java map 遍历

    转自http://rain-2372.iteye.com/blog/1615615 package com.spring.test_B11_aop1; import java.util.HashMap ...

  6. Python 编码规范

    官网规范:https://www.python.org/dev/peps/pep-0008/ 1.不在同一句import中引用多个库 # 正确姿势: import os import sys # 错误 ...

  7. js比typeof更准确的验证类型方法

    var type = function (o){ var s = Object.prototype.toString.call(o); return s.match(/\[object (.*?)\] ...

  8. 【转】MYSQL入门学习之一：基本操作

    转载地址:http://www.2cto.com/database/201212/173868.html 1.登录数据库    www.2cto.com       命令:mysql -u usern ...

  9. combobox中动态加入几个checkbox，实现下拉框多选

    combobox中动态加入几个checkbox,实现下拉框多选,将一个checkbox选中时其内容就会在combobox中显示出来,将另一个checkbox选中时其内容会跟在第一个checkbox的内 ...

  10. 20150916_001 vba 基础

    一.什么是“宏”.“宏”有什么用 关于“宏”的详细定义,可以参考百度百科的解释(点击查看).我给它一个简单的或许不太严谨的定义: 宏的通俗定义:宏是被某些软件所能识别.理解并执行的特定代码/脚本. 宏 ...