<!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title></title>

     <link rel="stylesheet" type="text/css" href="style.css">

 </head>

 <body>

     <div></div>

 </body>

 </html>
 div{

     width: 100px;

     height: 100px;

     background: rgba(255,0,0,0.2);

     /*border:2px solid green;*//*类似padding * ** *** ****的设置规则*/

     border-width: 3px;/*单位px或em，可设this、medium、thick*/

     border-style:double;/*默认none无边框；dotted点状；dashed虚线；solid实线；double双线，至少3px才能看到效果；groove定义3D凹槽；ridge定义3D凸起；inset内凹；outset外凸*/

     border-color: green;

     /*border-bottom: 20px black solid;*/

     border-top: ;

     border-top-style:

     border-left: ;

     border-right: ;

     /*border-radius:1em/2em ;*//*圆角的半径：单位px、em；复合属性有类似padding *(上右下左) **(左右、上下) ***(上、左右、下) ****(同*)的规律。x向半径/y向半径*/

     border-top-left-radius: 1em;

     border-top-right-radius: 1em;

     border-bottom-left-radius: 1em;

     border-bottom-right-radius: 1em 4em;/*可设x半方向半径和y方向半径不等*/

     /*border-image:url(img/花3.jpg) 20 /1em /1em repeat;*//*复合属性多个值同时设置时width和outset值前要加/，否则无效*/

     /*border-image-source: url(img/花3.jpg);*/

     /*border-image-slice: 20;*/

     border-image-width:1em ;/*单位px、em*/

     border-image-outset:1em ;/*单位px、em*/

     border-image-repeat: round;/*默认stretch拉伸；repeat重复铺满，一张图片切成3×3的九宫格，四个角填充四个角，上下左右分别重复填充四个边；round重复铺满并对图片进行调整，上下左右填充四个边时如果出现半个则进行微调，保证不会出现半个图形*/

     /*border-image-slice: 20 fill;*//*fill的作用是使九宫格中间一格也填充区域*/

 }

 div{

     box-shadow: 2px 2px 1px 1px red,4px 4px 1px 1px blue;/*默认none无阴影；阴影水平偏移值正右负左，阴影垂直偏移值正下负上，阴影模糊度，阴影外延值，阴影颜色，内外阴影（inset，默认outset，在偏移量为0时outset省和不省效果有区别）*/

 }

 div:hover{

     box-shadow:

         0px 0px 1px 5px red,

         0px 0px 1px 10px green,

          0px 0px 1px 15px blue,

 }

【CSS3】边框的更多相关文章

  1. HTML 学习笔记 CSS3 (边框)

    CSS3边框 通过CSS3边框 你能够创建远角边框 向矩形边框添加阴影 使用图片来绘制边框 . CSS3的边框属性 主要包含以下几种 border-radius 边框圆角 box-shadow 边框阴 ...

  2. [HTML] CSS3 边框

    CSS3 边框 用CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如Photoshop. 在本章中,您将了解以下的边框属性: border-radius box-shado ...

  3. CSS3边框温故

    1.简介:border属性在CSS1中就已经定义了,用来设置元素边框风格,设置不同的边框.颜色.粗细 2.基本属性,包括三个类型值:(1)border-width:设置元素边框的粗细,默认3~4px( ...

  4. css3 边框记

    css3 边框 border属性在css1中就已经定义了,使用它可以设置元素的边框风格,边框颜色以及边框粗细. border-width:设置元素边框的粗细. border-color:设置元素边框的 ...

  5. CSS3 边框

    说明:CSS3完全向后兼容,因此不必改变现有的设计.浏览器通常支持CSS2 CSS3模块 CSS3被划分为模块: 选择器 框模型 背景和边框 文本效果 2D/3D 转换 动画 多列布局 用户界面 CS ...

  6. 第八十节，CSS3边框图片效果

    CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一．属性解释     CSS3 ...

  7. css3边框与背景

    一.css3边框 1.border-image 边框 border-image: url(xxx.png) number stretch 很好理解就是拉伸,有多长拉多长. repeat (和4角上 同 ...

  8. 第95天：CSS3 边框、背景和文字效果

    1.CSS3边框: border-radius:CSS3圆角边框.在 CSS2 中添加圆角矩形需要技巧,我们必须为每个圆角使用不同的图片,在 CSS3 中,创建圆角是非常容易的,在 CSS3 中,bo ...

  9. CSS3 边框 圆角 背景

    CSS3用于控制网页的样式布局. CSS3是最新的CSS标准.   关于transform: transform:rotate(10deg);//顺时针方向旋转10° 浏览器支持情况:低版本的IE浏览 ...

  10. CSS3边框border-radius

    一.官方解释 设置或检索对象使用圆角边框.提供2个参数,2个参数以“/”分隔,每个参数允许设置1~4个参数值,第1个参数表示水平半径,第2个参数表示垂直半径,如第2个参数省略,则默认等于第1个参数. ...

随机推荐

  1. iOS多线程--深度解析

    多线程 你们项目中为什么多线程用GCD而不用NSOperation呢? 你有没有发现国外的大牛他们多线程都是用NSOperation? 你能告诉我他们这样做的理由吗? 关系: ①:先搞清两者的关系,N ...

  2. Centos下mongodb的安装与配置

    安装MongoDB的方法有很多种,可以源代码安装,在Centos也可以用yum源安装的方法. 1.准备工作 运行yum命令查看MongoDB的包信息 yum info mongodb-org (提示没 ...

  3. 《java.util.concurrent 包源码阅读》25 Fork/Join框架之Fork与Work-Stealing（重写23，24）

    在写前面两篇文章23和24的时候自己有很多细节搞得不是很明白,这篇文章把Fork和Work-Stealing相关的源代码重新梳理一下. 首先来看一些线程池定义的成员变量: 关于scanGuard: v ...

  4. 在JQuery中如何获取当前时间？

    ////发表时间(now) function p(s) { return s < 10 ? '0' + s : s; } var myDate = new Date(); //获取当前年 var ...

  5. Android Studio 升级到3.0 提示 java.lang.NoClassDefFoundError

    Android Studio 升级到3.0 提示 java.lang.NoClassDefFoundError 这个问题折腾了2个小时,最后解决了,Stack Overflow 上也有一次类似的问题, ...

  6. CCF认证考试——折点计数

    描述:简单题 #include<iostream> using namespace std; int main() { ], n, count = ; cin >> n; ; ...

  7. 移动GIS在企业各个行业中的应用解决方案

    “移动GIS的设备厂商越来越多地关注行业用户的需求,所以移动GIS的市场前景是非常广阔的.当前国内移动GIS,已广泛应用于测绘.国土.环境.水利.农业.林业和矿产等传统资源管理领域和城市规划方面.在应 ...

  8. 深入常用CSS声明(一) —— Background

    一直对一些自己常用的css声明掌握得不是很全,只知道常用的一些属性和值,但是对于其他的用法确实一知半解,这篇文章旨在扫盲,先不说有多深的理解,至少做到能够看到这些声明的属性和值的时候做到不陌生. 这里 ...

  9. Solr7.1---数据库导入并建立中文分词器

     这里只是告诉你如何导入,生产环境不要这样部署你的solr服务. 首先修改solrConfig.xml文件 备份_default文件夹 修改solrconfig.xml 加入如下内容 官方示例:< ...

  10. Sql Server 新的日期类型

    新的日期类型:是出现在2008中的在2005中没有的日期类型. 1,Date 数据类型  2,time 数据类型  3, datetime2 数据类型  4, datetimeoffset 数据类型 ...