边框样式有全边框和单个边框样式，可对每条边设置不同的样式

如下代码P1为全边框样式，P2为单个边框设置不同的样式:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css边框样式</title>

    <style>

        #p1{

            background: yellowgreen;

            border:4px dotted rebeccapurple;

            border-radius: 20px;

            width:200px;

            text-align:center;

            padding:5px;

            color:#fff;

            font-weight:bold;

        }

        #p2{

            background: rebeccapurple;

            border:4px dashed skyblue;

            border-radius: 5px;

            width:200px;

            text-align:center;

            padding:5px;

            color:#fff;

            font-weight:bold;

            border-bottom-color: palegreen;

            border-top-style: dotted;

        }

    </style>

</head>

<body>

<p id="p1">这是一段测试文字</p>

<p id="p2">这是一段测试文字</p>

</body>

</html>

css盒子边框样式的更多相关文章

  1. CSS border边框属性教程(color style)

    CSS 边框即CSS border-border边框样式颜色.边框样式.边框宽度的语法结构与应用案例教程篇 一.CSS 边框基础知识 CSS 边框即CSS border是控制对象的边框边线宽度.颜色. ...

  2. 前端开发CSS3——文本样式和盒子及样式

    博主废话少说,直接介绍css常用的属性和属性值:属性和值只需过一遍,页面的结构还是需要布局,布局的只是后期会更新的. 提供一些图标的网站:font-awesome:     http://fontaw ...

  3. web前端学习（三）css学习笔记部分（7）-- 文字和字体相关样式、盒子相关样式、背景与边框相关样式

    12.  文字和字体相关样式 12.1  CSS3 给文字添加阴影 使用 text-shadow 属性给页面上的文字添加阴影效果,text-shadow 属性是在CSS2中定义的,在 CSS2.1 中 ...

  4. css盒子模型之边框宽度，边框颜色与边框样式

    /* width和height只是设置盒子内容区的大小,而不是盒子的整个大小, 盒子可见框的大小由内容区,内边距和边框共同决定. */ .box1 { /* 设置内容区的宽度为400px */ wid ...

  5. [转]CSS如何设置html table表格边框样式

    原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...

  6. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  7. css盒子模型、边框border、外边距margin、填充padding、轮廓outline

    盒子模型:盒子默认的宽度为容器的宽度,也可以自省设定宽度,高度根据内容适应,也可以自行设定高度.min-height设定最小高度 一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清 ...

  8. 前端 CSS 盒子模型 边框 border属性

    边框 border:边框的意思,描述盒子的边框 边框有三个要素: 粗细 线性样式 颜色 border: solid border特性 如果颜色不写,默认是黑色.如果粗细不写,不显示边框.如果只写线性样 ...

  9. 2 CSS盒子模型&边框&轮廓&外边距&填充&分组嵌套&尺寸&display与visibility

    盒子模型 Box  Model 所有HTML元素可以看做盒子,CSS模型本质上是一个盒子,封装周围的HTML元素 包括:边距,边框,填充和实际内容 盒子模型允许我们在其他元素和周围元素边框之间的空间放 ...

随机推荐

  1. Chrome浏览器扩展开发系列之十五：跨域访问的XMLHttpRequest对象

    XMLHttpRequest对象是W3C的标准API,用于访问服务器资源.XMLHttpRequest对象支持多种文本格式,如XML和JSON等.XMLHttpRequest对象可以通过HTTP和HT ...

  2. js 数组里求最大值和最小值

    // 数组里相邻两个数做比较 取满足条件的那个(以此类推) var arr = [1,3,4,5,6,7]; function Max(array){ var max = array[0]; for( ...

  3. Luogu 1962 斐波那契数列（矩阵，递推）

    Luogu 1962 斐波那契数列(矩阵,递推) Description 大家都知道,斐波那契数列是满足如下性质的一个数列: f(1) = 1 f(2) = 1 f(n) = f(n-1) + f(n ...

  4. JavaScript中判断鼠标按键(event.button)

    <div id="test"></div> <script> document.oncontextmenu=function(){ return ...

  5. 【一步一步】Spring 源码环境搭建

    平时项目中基本上都会用到spring,但是源码还没有深入的了解过.趁这段时间稍微空闲点,开始研究下spring 源码.下面是spring 源码的环境搭建. 主要分为如下步骤: ①安装jdk,gradl ...

  6. 事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流

    一.事件冒泡定义 事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那 ...

  7. MS MDS系列之初始MS Master Data Service(微软主数据服务)

    背景介绍: 主数据服务(Master Data Services)是微软平台支持的主数据管理(MDM)平台.类似MDS这样的系统,如果后续维护得当,会给企业提供一个强大的中心数据库系统,来防止企业数据 ...

  8. 【CSS】less 学习小结

    1. less 使用 less 可直接使用浏览器解析 or  使用node 的grunt/gulp 解析成传统css . 推荐开发环境直接使用less 文件调试, 生产环境部署解析好的css 2. l ...

  9. 【samba】samba 用户权限配置（转）

    首先要保证你的samba安装并配置好,关于安装和配置samba请参考此文章 http://blog.csdn.net/linglongwunv/archive/2010/01/19/5212875.a ...

  10. MyBatis+PageHelper实现分页

    转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/7256105.html 前面讲到Spring+SpringMVC+MyBatis深入学习及搭建(十七)--Sp ...