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

如下代码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. usaco 2002 月赛 Fiber Communications 题解

    Description Farmer John wants to connect his N (1 <= N <= 1,000) barns (numbered 1..N) with a ...

  2. Docker快速入门

    Docker已经火了很长一段时间,最近打算在阿里云上好好熟悉一下Docker的相关应用,为今后的工作做准备. 基本概念 Docker是基于Go语言实现的云开源项目,诞生于2013年初,最初发起者是do ...

  3. eclipse 修改中英文显示

    1.关闭eclipse 2.右键->选择属性--->打开文件位置 3.找到“eclipse.ini”文件,用EditPlus打开 4.在里面加 “-Duser.language=en”,即 ...

  4. easyui点击搜索的时候获取不要文本框里面的值的问题

    jsp的代码 <div id="tb"> <input id="AppID" placeholder="请根据申请人ID搜索&quo ...

  5. 设置TrackMouseEvent捕获WM_MOUSEHOVER和WM_MOUSELEAVE消息

    WM_MOUSEHOVER(非客户区消息为WM_NCMOUSEHOVER)消息表示鼠标在客户区悬浮消息,WM_MOUSELEAVE(非客户区消息为WM_NCMOUSELEAVE)为鼠标离开客户区消息, ...

  6. 3，Spring Boot热部署

    问题的提出: 在编写代码的时候,你会发现我们只是简单把打印信息改变了,就需要重新部署,如果是这样的编码方式,那么我们估计一天下来就真的是打几个Hello World就下班了.那么如何解决热部署的问题呢 ...

  7. Android - Fragment（二）加载Fragment

    Fragment加载方法 加载方法有两种,在xml文件中注册,或者是在Java代码中加载. xml中注册 例如在fragment_demo.xml中定义 <?xml version=" ...

  8. 用caffe一步一步实现人脸检测

    学习深度学习已有一段时间了,总想着拿它做点什么,今天终于完成了一个基于caffe的人脸检测,这篇博文将告诉你怎样通过caffe一步步实现人脸检测.本文主要参考唐宇迪老师的教程,在这里感谢老师的辛勤付出 ...

  9. 前端性能优化--图片懒加载(lazyload image)

    话说前头: 上次写了一篇webpack的学习心得,webpack能做到提升前端的性能,其模块打包最终生成一个或少量的文件能够减少对服务端的请求.除此之外,本次的图片懒加载(当然不仅限于图片,还可以有视 ...

  10. DL4NLP——词表示模型（二）基于神经网络的模型：NPLM；word2vec（CBOW/Skip-gram）

    本文简述了以下内容: 神经概率语言模型NPLM,训练语言模型并同时得到词表示 word2vec:CBOW / Skip-gram,直接以得到词表示为目标的模型 (一)原始CBOW(Continuous ...