一、圆角效果 border-radius

  使用方法:

  border-radius:10px; /* 所有角都使用半径为10px的圆角 */

   border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */

   不要以为border-radius的值只能用px单位,你还可以用百分比或者em

 <!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>border-radius</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: aquamarine;
border-radius: 5px;
} #box1 {
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
} #box2 {
width: 100px;
height: 100px;
background-color: blue;
border-radius: 5px 10px 20px 30px;
} #box3 {
width: 50px;
height: 100px;
background-color: coral;
border-radius: 50px 0px 0px 50px;
}
</style>
</head> <body>
<h4>为正方形添加圆角效果</h4>
<div id="box"></div> <br> <h4>实心圆</h4>
<div id="box1"></div> <br> <h4>为正方形4个角分别添加不同的圆角幅度</h4>
<div id="box2"></div> <br> <h4>半圆</h4>
<div id="box3"></div>
</body> </html>

border-radius实用

二、边框阴影 box-shadow

   box-shadow是向盒子添加阴影。支持添加一个或者多个。
        语法:
   box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; 
  参数介绍:
      
  注意:inset 可以写在参数的第一个或最后一个,其它位置是无效的。
 

  1、阴影模糊半径与阴影扩展半径的区别

  阴影模糊半径:此参数可选,其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊;

  阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小;

  2、X轴偏移量和Y轴偏移量值可以设置为负数

  注意:如果添加多个阴影,只需用逗号隔开即可
 <!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>box-shadow</title>
<style>
#box {
width: 100px;
height: 100px;
box-shadow: 4px 2px 6px #333333;
} #box1 {
width: 100px;
height: 100px;
box-shadow: 4px 2px 6px #333333 inset;
} #box2 {
width: 100px;
height: 100px;
box-shadow: 4px 2px 6px #f00,
-4px -2px 6px #000,
0px 0px 12px 5px #33cc00 inset
} #box3 {
width: 100px;
height: 100px;
box-shadow: -4px 2px 6px #333333;
} #box4 {
width: 100px;
height: 100px;
box-shadow: 4px -2px 6px #333333;
}
</style>
</head> <body> <h3>外阴影</h3>
<div id="box"></div> <h3>内阴影</h3>
<div id="box1"></div> <h3>添加多个阴影</h3>
<div id="box2"></div> <h3>X轴偏移量为负数</h3>
<div id="box3"></div> <h3>Y轴偏移量为负数</h3>
<div id="box4"></div>
</body> </html>

box-shadow实用

三、为边框应用图片 border-image

  border-image 顾名思义就是为边框应用背景图片,它和我们常用的background属性比较相似。

  border-image的语法:

  

  repeat就是一直重复,然后超出部分剪裁掉,而且是居中开始重复。
    Round可以理解为圆满的铺满。为了实现圆满所以会压缩(或拉伸)。
    Stretch 很好理解就是拉伸,有多长拉多长。有多远“滚”多远。
    webkit浏览器对于round属性和repeat属性似乎没有区分,显示效果是一样的。
 
 <!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>border-image</title>
<style>
#box {
width: 180px;
height: 180px;
background: #F4FFFA;
border: 70px solid #ddd;
border-image: url(/img/1.png) 70 repeat
} #box1 {
width: 170px;
height: 170px;
border: 70px solid;
border-image: url(/img/1.png) 70 round;
} #box2 {
width: 170px;
height: 170px;
border: 70px solid;
border-image: url(/img/1.png) 70 stretch;
} #border_image {
height: 100px;
width: 450px;
border: 15px solid #ccc;
border-image: url(http://img.mukewang.com/52e22a1c0001406e03040221.jpg) 30 round;
}
</style>
</head> <body> <h3>repeat(重复)</h3>
<div id="box"></div> <h3>round(平铺)</h3>
<div id="box1"></div> <h3>stretch(拉伸)</h3>
<div id="box2"></div> <h3>请为我镶嵌上漂亮的画框吧</h3>
<div id="border_image"> </body> </html>

border-image实用

 
    

CSS3-边框 border的更多相关文章

  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. OpenResty 社区王院生:APISIX 的高性能实践

    2019 年 7 月 6 日,OpenResty 社区联合又拍云,举办 OpenResty × Open Talk 全国巡回沙龙·上海站,OpenResty 软件基金会联合创始人王院生在活动上做了&l ...

  2. Tomcat源码分析 (九)----- HTTP请求处理过程(二)

    我们接着上一篇文章的容器处理来讲,当postParseRequest方法返回true时,则由容器继续处理,在service方法中有connector.getService().getContainer ...

  3. Zabbix监控华为路由器配置

    zabbix监控华为路由器 一.配置路由器界面: 开启snmpv2c功能,同时勾选v2c版本(不要勾v1,不安全,其实v2也不安全,如果很注重安全的话,一定要只配置v3). 手里没有路由器登录账号,大 ...

  4. Jmeter接口自动化实例(使用Beanshell保存csv文件、csv参数化、setUp线程组)

    很久没更新博客了,荒废了很久了,今天更新一下博客,主要记录一下子最近遇到的问题和解决方法:blonde_woman: 这篇文章主要记录的是jmeter批量跑接口中遇到的各种疑难,主要涉及到的问题如下 ...

  5. @RequestBody 注意的问题

    contentType : "application/json", //只能是这个 RequestBody 不能和form/data共存: @RequestMapping(valu ...

  6. git之旅,畅游git的世界

    今天小铭酱带大家探索一下git的奥秘! 1.初步探索 首先我在一个空的文件夹新建了一个名叫hello.html文件,文件内容只有一句话“hello git”.我们先引入git,看看git能为我们它能干 ...

  7. rocketmq 部署启动指南-Docker 版

    最近学习使用 rocketmq,需要搭建 rocketmq 服务端,本文主要记录 rocketmq 搭建过程以及这个过程踩到的一些坑. 准备工作 在搭建之前,我们需要做一些准备工作,这里我们需要使用 ...

  8. Js 组合键

    同时按Ctrl+Enter或Alt+s 先上html代码 <style type="text/css"> #box{width: 500px; height: 500p ...

  9. P1640 [SCOI2010]连续攻击游戏 二分图构造

    https://www.luogu.org/problemnew/show/P1640 题意 lxhgww最近迷上了一款游戏,在游戏里,他拥有很多的装备,每种装备都有2个属性,这些属性的值用[1,10 ...

  10. ZOJ-1610 Count the Colors ( 线段树 )

    题目链接: http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=1610 Description Painting some co ...