一，效果图。

二，代码。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>CSS Border(边框)</title>

    <style>

    p.one {

        border-style: solid;

        border-width: 5px;

        border-color: red;

        border-top-style: dotted;

        border-right-style: solid;

        border-bottom-style: dotted;

        border-left-style: solid;

    }

    p.two {

        border-style: solid;

        border-width: medium;

        border-color: #98bf21;

    }

    p.three {

        border-style: solid;

        border-width: 1px;

    }

    </style>

</head>

<body>

    <p class="one">Some text.</p>

    <p class="two">Some text.</p>

    <p class="three">Some text.</p>

    <p><b>Note:</b> The "border-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>

</body>

</html>

参考资料:《菜鸟教程》

【代码笔记】Web-CSS-CSS Border(边框)的更多相关文章

  1. css 使用background背景实现border边框效果

    css中,我们一般使用border给html元素设置边框,但也可以使用background背景来模拟css边框效果,本文章向大家介绍css 使用background背景实现border边框效果,需要的 ...

  2. Python学习笔记整理总结【web基础】【web/HTML/CSS/JavaScript/DOM/jQuery】

    一.HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以 ...

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

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

  4. HTML 学习笔记 CSS样式（边框）

    元素的边框(border)是围绕元素内容和内边距的一条或多条线 CSS border 属性允许你规定边框的样式 宽度和颜色 CSS 边框 在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使 ...

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

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

  6. CSS3基础——笔记+实战案例(CSS基本用法、CSS层叠性、CSS继承性)

    CSS3基础——笔记 CSS是Cascading Style Sheet的缩写,翻译为"层叠样式表" 或 "级联样式表".CSS定义如何显示HTML的标签央视, ...

  7. 【CSS】使用边框和背景

    1. 应用边框样式 先从控制边框样式的属性开始.简单边框有三个关键属性:border-width.border-style 和 border-color . <!DOCTYPE html> ...

  8. 重温CSS：Border属性

    边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...

  9. CSS 的 border 样式

    制作过网页的人都有为画线而烦恼的经历,先来认识一下“Border”(画边框),它是CSS的一个属性,用它可以给能确定范围的HTML标记(如TD.DIV等等)画边框,它可以定义边框线的类型.宽度和颜色, ...

随机推荐

  1. 值得收藏！！javascript数组中多条对象去重方式，很实用！！！

    在数组中都是数字的时候很好去重,例如:var  arr=[1,2,2,2,3,4,5,4,5,3,6]:可以用两层for循环或者其他方式进行去重 我在这里也给出一个方法吧: Array.prototy ...

  2. Azure基础（一）云的概念 - 云计算的原理

    Azure fundamentals - Cloud Concepts - Principles of cloud computing Explore the core concepts of clo ...

  3. 【RL-TCPnet网络教程】第13章 RL-TCPnet之TCP服务器

    第13章      RL-TCPnet之TCP服务器 本章节为大家讲解RL-TCPnet的TCP服务器实现,学习本章节前,务必要优先学习第12章TCP传输控制协议基础知识.有了这些基础知识之后,再搞本 ...

  4. js注入攻击

    注入攻击一般指用户输入数据导致页面乃至整个网站.服务器异常的情况. 直接看一个例子: <html> <head> <title>Test</title> ...

  5. [Swift]LeetCode600. 不含连续1的非负整数 | Non-negative Integers without Consecutive Ones

    Given a positive integer n, find the number of non-negativeintegers less than or equal to n, whose b ...

  6. java中this和super关键字的使用

    这几天看到类在继承时会用到this和super,这里就做了一点总结,与各位共同交流,有错误请各位指正~ this this是自身的一个对象,代表对象本身,可以理解为:指向对象本身的一个指针. this ...

  7. 面试题：反转字符串（leetcode344）

    编写一个函数,其作用是将输入的字符串反转过来.输入字符串以字符数组 char[] 的形式给出. 不要给另外的数组分配额外的空间,你必须原地修改输入数组.使用 O(1) 的额外空间解决这一问题. 你可以 ...

  8. Eclipse debug Source not found

    点击打开链接最近开始慢慢转向idea开发了,但是因为旧项目是在eclipse里面.就没有在idea导入,所以旧项目就用eclipse,新项目就用idea.然而最近几天eclipse似乎不干了,每次de ...

  9. Shell获取时间，日期，上月，当月，下月

    #当前日期 $ date +%F #当前时间$ date +"%F %H:%M:%S" #昨日$ date -d yesterday +%F #上一个月 $ date -d &qu ...

  10. 启动MongoDB shell客户端会什么会一闪而过

    解决办法: 在MongoDB shell客户端根目录下右击选择 "在此处打开命令窗口"; 在命令窗口敲入mongod --dbpath=d:/mongodb/data ; //我的 ...