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

如下代码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. User implements HttpSessionBindingListener

    public class User implements HttpSessionBindingListener { private int id; private String userName; p ...

  2. Chrome浏览器扩展开发系列之十四：本地消息机制Native messaging

    通过将浏览器所在客户端的本地应用注册为Chrome浏览器扩展的“本地消息主机(native messaging host)”,Chrome浏览器扩展还可以与客户端本地应用之间收发消息. 客户端的本地应 ...

  3. python打印万年历

    1.输入年份,输入月份 2.格式化输出本月的日历 3.思路 输入年,月,打印对应年月的日历.1,首先1970年是Unix系统诞生的时间,1970年成为Unix的元年,1970年1月1号是星期四,现在大 ...

  4. php 批量进行复制文件

    php 批量进行复制文件 1.前言 目标:php批量进行复制指定的目录文件夹下所有文件复制到另一个文件夹下 所使用的的php函数:is_dir,opendir,readdir,scandir,mkdi ...

  5. web开发之负载均衡的简单架构

    负载均衡 负载均衡的核心思想就是:请求分担 最简单的配置: 一台负载均衡服务器 两台webserver服务器 两台webserver服务器需要配置相同的服务器环境,设置相同的域名指向 负载均衡服务器需 ...

  6. 华为OJ之自动售货系统

    本题主要难点有两部分: 1,找零算法.如何找零应该是最具技巧性的部分,根据已有的硬币金额分布,对应的解决办法可能会有不同.本题中的1,2,5,10这种情况满足贪心性质,故我们简单的用贪心算法的思想来解 ...

  7. jenkins2 -pipeline 常用groovy脚本

    jenkins2的核心是pipeline,pipeline的核心是groovy. 那有一些基础的groovy是必须经常使用的,如变量赋值,变量引用,打印变量,输出字符,任务调用,循环判断等. Groo ...

  8. 移动端 transitionEnd函数用来检测过渡是否完成

    注意的几点:兼容 'webkitTransitionEnd' 解绑 renmove tab_wrap.addEventListener('transitionEnd',transitionEnd); ...

  9. OVS故障处理一例

    OVS下无法访问内部网站 遇到朋友求助的一个客户问题,环境是这样的,客户在自己的iaas平台(不是openstack)上使用ovs,物理交换机上配置vlan和dhcp service,计算节点的ovs ...

  10. Java生成MD5加密字符串代码实例

    这篇文章主要介绍了Java生成MD5加密字符串代码实例,本文对MD5的作用作了一些介绍,然后给出了Java下生成MD5加密字符串的代码示例,需要的朋友可以参考下   (1)一般使用的数据库中都会保存用 ...