CSS常用样式

3.边框样式

  1)边框线

    border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

    常用的边框线:dotted(点状)、dashed(虚线)、solid(实线)、double(双实线)

    border-top-style    设置上边框线

    border-bottom-style  设置下边框线

    border-left-style    设置左边框线

    border-right-style    设置右边框线

    例子:

/* CSS代码 */
.style{
width:100px;
height:100px;
border-top-style:dotted;
border-bottom-style:dashed;
border-left-style:solid;
border-right-style:double;
}
<!-- HTML代码 -->
<body>
<div class="style"></div>
</body>

    效果:

 

  2)边框宽度

    border-width : thin | medium | thick | length

    thin(细边框)、medium(中等边框)、thick(粗边框)、length(数值px)

    border-top-width    设置上边框宽度

    border-bottom-width  设置下边框宽度

    border-left-width    设置左边框宽度

    border-right-width    设置右边框宽度

    例子:

/* CSS代码 */
.width{
width:100px;
height:100px;
border-style:solid;
border-top-width:thin;
border-bottom-width:medium;
border-left-width:thick;
border-right-width:10px;
}
<!-- HTML代码 -->
<body>
<div class="width"></div>
</body>

    效果:

 

  3)边框颜色

    border-color: color

    color取值:英文单词、十六进制、RGB

    border-top-color    设置上边框颜色

    border-bottom-color  设置下边框颜色

    border-left-color    设置左边框颜色

    border-right-color    设置右边框颜色

    例子:

/* CSS代码 */
.color{
width:100px;
height:100px;
border-style:solid;
border-color:5px;
border-top-color:yellow;
border-bottom-color:green;
border-left-color:#f00000;
border-right-color:rgb(0,0,0);
}
<!-- HTML代码 -->
<body>
<div class="color"></div>
</body>

    效果:

 

  4)边框样式缩写

    border : border-width  border-style  border-color

    例子:

div {
width:100px;
height:100px;
border-width:1px;
border-style:solid;
border-color:#FF0000;
}

    缩写后:

div {
width:100px;
height:100px;
border:1px solid #FF0000;
}

  

  5)圆角效果

    border-radius: length | percentage

   向元素添加圆角表框。有一下几种情况:

   1、所有角都使用半径为10px的圆角

    div{ border-radius:10px;}

 

   2、四个半径值分别是左上角、右上角、右下角和左下角,顺时针方向

    div{ border-radius: 10px 20px 30px 40px; }

 

   3、设置每个角的水平半径和垂直半径,用斜杠隔开

    div{ border-radius:40px/20px; }

 

   4、圆形

    div{ border-radius:50% }

 

      

  6)边框图片

    border-image

    边框样式使用图像来填充

    设置了border-image后,border-style则不显示

  7)盒子阴影

    box-shadow: none | shadow

    box-shadow: 水平偏移量 垂直偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

    其中,水平和垂直的偏移量必写,其它各自展示不同的效果。

    1、外阴影常规效果:

/* CSS代码 */
.outset{
width:100px;
height:100px;
background:#000;
box-shadow:5px 5px #ccc;
}
<!-- HTML代码 -->
<body>
<div class="outset"></div>
</body>
 

    2、外阴影模糊效果:

/* CSS代码 */
.outset-blur{
width:100px;
height:100px;
background:#000;
box-shadow:5px 5px 10px #000;
}
<!-- HTML代码 -->
<body>
<div class="outset-blur"></div>
</body>
 

    3、外阴影模糊外延效果:

/* CSS代码 */
.outset-extension{
width:100px;
height:100px;
background:#000;
box-shadow:5px 5px 10px 10px #f00;
}
<!-- HTML代码 -->
<body>
<div class="outset-extension"></div>
</body>
 

    4、内阴影常规效果:

/* CSS代码 */
.inset{
width:100px;
height:100px;
background:#ccc;
box-shadow:5px 5px #000 inset;
}
<!-- HTML代码 -->
<body>
<div class="inset"></div>
</body>
 

    5、内阴影模糊效果:

/* CSS代码 */
.inset-blur{
width:100px;
height:100px;
background:#ccc;
box-shadow:5px 5px 10px #000 inset;
}
<!-- HTML代码 -->
<body>
<div class="inset-blur"></div>
</body>
 

  *在下一篇博文中,会说到关于边框样式和盒子阴影应用到网页中的效果。

CSS知识总结(五)的更多相关文章

  1. WEBBASE篇: 第五篇, CSS知识3

    CSS知识3 框模型: 一,外边距(上文) 二, 内边距    1,什么是内边距? 内边距就是内容与元素边缘之间的距离: 注: 内边距会扩大元素边框内所占的区域的 语法: padding: 四个方向的 ...

  2. WEBBASE篇: 第三篇, CSS知识1

    第三篇, CSS知识1 一,CSS 介绍 CSS: Cascading Style Sheets ---样式表 HTML: 搭建网页结构: CSS: 在网页结构基础上进行网页的美化: 二,CSS的使用 ...

  3. Web前端基础怎么学? JavaScript、html、css知识架构图

    以前开发者只要掌握 HTML.CSS.JavaScript 三驾马车就能胜任一份前端的工作了.而现在除了普通的编码以外,还要考虑如何性能优化,如何跨端.跨平台实现功能,尤其是 AI.5G 技术的来临, ...

  4. CSS知识回顾--读《CSS 那些事儿》笔记

    由于之前有了解过CSS的相关知识,有了一定的基础,所以读起<CSS 那些事儿>不是很有难度,况且我现在读起来时,CSS3和HTML5比较流行,这里只是记录一些CSS知识记录,不做详细铺开, ...

  5. 你该学点HTML/CSS知识的9大理由

    每个人都应该学写代码——这一观点简直就是铺天盖地地映入我们眼帘.或许你会莫名其妙,程序员学代码那是理所应当,但是作为一个作家.营销人员.财务工作者甚至是工人,为什么也需要学习代码呢? 好吧,下面我会告 ...

  6. IM开发基础知识补课(五):通俗易懂,正确理解并用好MQ消息队列

    1.引言 消息是互联网信息的一种表现形式,是人利用计算机进行信息传递的有效载体,比如即时通讯网坛友最熟悉的即时通讯消息就是其具体的表现形式之一. 消息从发送者到接收者的典型传递方式有两种: 1)一种我 ...

  7. WEBBASE篇: 第四篇, CSS知识2

    CSS知识2 一, 尺寸 与 边框 CSS单位 1,尺寸单位:(1)px 像素   (2)%   (3) in 英寸  lin = 2.54cm (4)pt 磅 1pt = 1/72in    ppi ...

  8. Python基础知识(五)

    # -*- coding: utf-8 -*-# @Time : 2018-12-25 19:31# @Author : 三斤春药# @Email : zhou_wanchun@qq.com# @Fi ...

  9. 《HTML与CSS知识》系列分享专栏

    收藏HTML和CSS方面的技术文章,作为一个WEB开发者,必须要知道HTML和CSS方面的知识,即使作为后台开发者也应该知道一些常用的HTML和CSS知识,甚至架构师也要了解,这样才会开发出实用的网站 ...

  10. Html CSS学习(五)position定位 原

    Html CSS学习(五)position定位 position用来对元素进行定位,其值有以下几种: static:无特殊定位,对象遵循正常文档流,top,right,bottom,left等属性不会 ...

随机推荐

  1. 运用php做投票题,例题

    要求大概是这样的,有一个题目,题目下面是复选框,要求点完复选框提交后会变成进度条,各选项的进度条百分比,和投票数量 首先还是要在数据库建两张表,如下: 要完成这个题目,需要建两个页面 <!DOC ...

  2. C#日志

    参考页面: http://www.yuanjiaocheng.net/Entity/first.html http://www.yuanjiaocheng.net/Entity/jieshao.htm ...

  3. .NET Core 2016 回顾

    都在回顾自己的2016,今天我们来看看.NET Core的2016. 每一年的脚步的确是快,转眼间马上就2017.新的一年,带着理想和抱负继续出发. 1 月 ASP.NET 5 改名 ASP.NET ...

  4. js attribute 和 jquery attr 方法

    attribute 是原生js dom 对象上的一个属性,这个属性有很多子属性,比如 isId(判断属性是否是Id) , name (获取属性名称) , value (获取属性值),attribute ...

  5. Angular (SPA) WebPack模块化打包、按需加载解决方案完整实现

    文艺小说-?2F,言情小说-?3F,武侠小说-?9F long long ago time-1-1:A 使用工具,long long A ago time-1-2:A 使用分类工具,long long ...

  6. React Native 之 Text的使用

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  7. 钉钉开放平台demo调试异常问题解决:hostname in certificate didn't match

    今天研究钉钉的开放平台,结果一个demo整了半天,这帮助系统写的也很难懂.遇到两个问题: 1.首先是执行demo时报unable to find valid certification path to ...

  8. ASP.NET Core Loves JavaScript

    前言 在 ASP.NET 团队的 Github 的主页上,有这样一个开源项目叫:"JavaScriptsServices",那么 什么是 JavaScriptsServices 呢 ...

  9. Jexus Web Server 完全傻瓜化图文配置教程(基于Ubuntu 12.04.3 64位)[内含Hyper-v 2012虚拟机镜像下载地址]

    1. 前言 近日有感许多新朋友想尝试使用Jexus,不过绝大多数都困惑徘徊在Linux如何安装啊,如何编译Mono啊,如何配置Jexus啊...等等基础问题,于是昨日向宇内流云兄提议,不如搞几个配置好 ...

  10. mono for android Json 上传文件

    void button_Click(object sender, EventArgs e) { string Url = "上传地址,服务器端负责接收"; byte[] fbyte ...