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. u-boot makefile $$

    define filechk_uboot.release    echo "$(UBOOTVERSION)$$($(CONFIG_SHELL) $(srctree)/scripts/setl ...

  2. 正确重写hashCode方法

    https://blog.csdn.net/HD243608836/article/details/87367763 到这里,对象写完了,开始描述问题. 计算hashCode的注意事项: 1.不能包含 ...

  3. Flask【第7篇】：Flask中的wtforms使用

    flask中的wtforms使用 一.简单介绍flask中的wtforms WTForms是一个支持多个web框架的form组件,主要用于对用户请求数据进行验证. 安装: pip3 install w ...

  4. [CF1142E] Pink Floyd

    传送门 题意:一个\(n\)个点的竞赛图,给出\(m\)条红色的边,其方向确定,其余边均为绿色,方向未知.你可以询问不超过\(2n\)次,每次询问一条绿色边的方向.要求找到一个点\(x\),使得\(x ...

  5. Java语言Lang包下常用的工具类介绍_java - JAVA

    文章来源:嗨学网 敏而好学论坛www.piaodoo.com 欢迎大家相互学习 无论你在开发哪中 Java 应用程序,都免不了要写很多工具类/工具函数.你可知道,有很多现成的工具类可用,并且代码质量都 ...

  6. LeetCode--015--三数之和(python)

    给定一个包含 n 个整数的数组 nums,判断 nums 中是否存在三个元素 a,b,c ,使得 a + b + c = 0 ?找出所有满足条件且不重复的三元组. 先对nums进行排序,再用双指针,L ...

  7. linux运维、架构之路-redis集群

    一.介绍            redis cluster 3.0之后的功能,至少需要3(Master)+3(Slave)才能建立集群,是无中心的分布式存储架构,可以在多个节点之间进行数据共享,解决了 ...

  8. android 开发架构学习

    Android DataBinding(数据绑定)入门与实战 http://examplecode.cn/2018/07/20/android-databinding-01-introduction/ ...

  9. STM32内部时钟设置-寄存器版

    STM32寄存器版本——内部时钟设置 同时要记得把延时初始化函数设置好 //系统时钟初始化函数 //pll:选择的倍频数,从2开始,最大值为16 //pll:选择的倍频数,这里使用内部时钟,PLL为4 ...

  10. Linux内核设计与实现 总结笔记（第十一章）定时器和时间管理

    时间管理在内核中占用非常重要的地位,内核中有大量的函数都需要基于时间驱动的,内核对相对时间和绝对时间都非常需要. 一.内核中的时间概念 内核必须在硬件的帮助下才能计算和管理时间,系统定时器以某种频率自 ...