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. 牛客练习赛14 E - 无向图中的最短距离 (bfs+bitset)

    一个链接:https://ac.nowcoder.com/acm/contest/82/E来源:牛客网 无向图中的最短距离 时间限制:C/C++ 2秒,其他语言4秒 空间限制:C/C++ 262144 ...

  2. evpp心跳机制

    client server xin good

  3. [每日一学]apache camel|IBMWebsphere MQ header issue|MQRFH2 |MQSTR

    最近工作中,遇到一个很奇怪的问题: 现象:在camel开发中,通过 IBM Websphere MQ 给assasin 发送xml的message时,会多出<mcd>等这样的header出 ...

  4. linux运维、架构之路-KVM虚拟化技术

    一.云计算概述 云计算:是一种资源使用和交付模式 虚拟化:一种具体的技术,用来将物理机虚拟成为多个相互独立的虚拟机.云计算不等于虚拟化,云计算是使用了虚拟化的技术做支撑 二.KVM配置使用 1.系统环 ...

  5. tomcat 启动一傘而过问题

    tomcat 启动一傘而过问题 D:\apache-tomcat-7.0.75\bin startup.bat打开记事本打开 第一行:设置启动环境变量JAVA_HOME,CATALINA_HOME S ...

  6. 【rust】rust安装，运行第一个Rust 程序 （1）

    安装 Rust 在 Unix 类系统如 Linux 和 macOS 上,打开终端并输入: curl https://sh.rustup.rs -sSf | sh 回车后安装过程出现如下显示: info ...

  7. 在Python中，如何将一个字符串数组转换成整型数组

    https://blog.csdn.net/xiangchengguan/article/details/78987041 arr = ['] arr = list(map(int,arr)) pri ...

  8. Actor Roles 图示

    Udemy上的教程<Unreal Multiplayer Mastery - Online Game Development in C++>中对Actor Roles的总结非常直观到位,一 ...

  9. TYPORA的使用手册

    Typora可以根据当前文档的标题层级,自动生成并显示大纲,窗口的右下角并有字数显示. 1.标题的使用标题的使用格式# 一阶标题 或者快捷键Ctrl+1 ##二阶标题 或者快捷键Ctrl+2 ###三 ...

  10. 学习日记17,、、通过反射获取model实体属性display的值

    本来是想到网上直接找个用的,但是找的一些都不是我想要的,然后就参考自己摸索写了一个 这里的UserModel是我自己定义的一个实体类,代码就不用放出来了 var t = typeof(UserMode ...