css 常用边框属性

  • 概览
参数 释义
border u设置边框属性（可以多个）
border-color 边框颜色
border-style 边框样式
solid 实线，dotted 点状线，dashed 虚线
border-width 边框粗细
border-left-color 左边框颜色（上下左右均可单独设置）
border-left-style 左边框样式（上下左右均可单独设置）
border-left-width 左边框高度（上下左右均可单独设置）
border-radius 圆角处理
box-shadow 必写参数：x 轴偏移，y 轴偏移，x 与 y 均接受负值
非必写参数：模糊度，扩散程度，阴影颜色，内阴影设置
  • 举例
  • html 部分
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>test</title>

        <link rel="stylesheet" type="text/css" href="./static/CSS/test.css">

    </head>

    <body>

        <div class="box1">

            <p>

                1234567890 <br>

                1234567890 <br>

                1234567890 <br>

            </p>

        </div>

        <div class="box2">

            <p>

                abcdefghijklmnopqrstuvwxyz <br>

                abcdefghijklmnopqrstuvwxyz <br>

                abcdefghijklmnopqrstuvwxyz <br>

            </p>

        </div>

        <div class="box3">

            <p>

                一二三四五六七八九十 <br>

                一二三四五六七八九十 <br>

                一二三四五六七八九十 <br>

            </p>

        </div>

    </body>

</html>
  • css 部分
*{

    width: 80%;

    height: 100px;

}

.box1{

    border: 3px solid black;            /* 多个属性设置：3px 实线 黑色 */

    border-radius: 20px;                /* 圆角 */

    box-shadow: 10px 10px 5px #888888;

    margin-bottom: 15px;                /* 设置间距，具体见之后的随笔 */

}

.box2{

    border-width: 3px;                  /* 单个属性设置 */

    border-style: dotted;               /* 点状线 */

    border-top-color: red;

    border-bottom-color: blue;

    border-left-color: orange;

    border-right-color: yellow;

    border-radius: 15% 50px;           /* 左下右下为 15% 右上左下为 50px */

    margin-bottom: 15px;

}

.box3{

    border-left-width: 3px;

    border-left-style: dashed;          /* 虚线 */

    border-right: 6px solid;            /* 两个属性设置 */

    border-radius: 15px 30px 45px 60px; /* 左上为起点，顺时针走 */

}
  • 效果截图

[Web 前端] 010 css 常用的边框设置的更多相关文章

  1. 好程序员web前端分享css常用属性缩写

    好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...

  2. [Web 前端] 009 css 常用的文本样式设置

    常用的文本 css 样式 概览 参数 释义 举例 color 设置文字的颜色 color:red; font-size 设置文字的大小 font-size:12px; font-family 设置文字 ...

  3. 【WEB前端】CSS常用选择器

    1.1 标签选择器 就是用标签名来当做选择器. 1) 所有标签都能够当做选择器,比如body.h1.dl.ul.span等等 2) 不管这个标签藏的多深,都能够被选择上. 3) 选择的是所有的,而不是 ...

  4. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  5. Python web前端 01 HTML常用标签

    Python web前端 01 HTML常用标签 一.HTML创建项目 file ---->new project -----> 输入项目名------>创建文件夹 new dicr ...

  6. Python web前端 02 CSS

    Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...

  7. Python web前端 03 CSS属性

    Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...

  8. 好程序员web前端分享CSS元素类型

    好程序员web前端分享CSS元素类型 目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依 ...

  9. 必知干货：Web前端应用十种常用技术你全都知道吗？

    Web前端应用十种常用技术,随着JS与XHTML的应用普及,越来越多的web界面应用技术出现在网站上,比如我们常见的日历控件,搜索下拉框等,这些web界面应用技术大大的丰富了网站的表现形式,本文将为您 ...

随机推荐

  1. oracle汇编01

    1: / define numeric label "1"one: / define symbolic label "one"/ ... assembler c ...

  2. fs.mkdir

    fs.mkdir(path[, mode], callback) 要求父目录必须存在 let fs = require('fs'); fs.mkdir('./c/b/a', res=>{ // ...

  3. ACM/IOI 国家队集训队论文集锦

    转自:https://blog.csdn.net/txl199106/article/details/49227067 国家集训队1999论文集 陈宏:<数据结构的选择与算法效率——从IOI98 ...

  4. spring security基本知识(三) 过滤详细说明

    在我们前面的文章Spring Security 初识(一)中,我们看到了一个最简单的 Spring Security 配置,会要求所有的请求都要经过认证.但是,这并不是我们想要的,我们通常想自定义应用 ...

  5. 1.docker容器技术基础入门

    内容来自:https://www.cnblogs.com/marility/p/10215062.html https://blog.51cto.com/gouyc/2310785?source=dr ...

  6. ESP8266-12F

    读者可以把ESP8266当做Arduino+WiFi功能来开发 ESP8266模块支持STA/AP/STA+AP 三种工作模式: STA 模式:ESP8266模块通过路由器连接互联网,手机或电脑通过互 ...

  7. JDK5的新特性

    本篇博客内容 一.自动装箱和自动拆箱 二.泛型 三.增强for循环 四.静态导入 五.可变参数 六.枚举 一.自动装箱和自动拆箱  <=返回目录 java有8种基本数据类型  byte.shor ...

  8. JS&ASPDotNet_大文件上传问题

    HTML部分 <%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="index.aspx. ...

  9. echarts曲线图

    drawLeftLine(){ let drawLine = echarts.init(document.getElementById('data-left-middle-table-wrap')); ...

  10. Socket网络通信编程（二）

    1.Netty初步 2.HelloWorld 3.Netty核心技术之(TCP拆包和粘包问题) 4.Netty核心技术之(编解码技术) 5.Netty的UDP实现 6.Netty的WebSocket实 ...