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. Linux之目录与路径

    特殊的目录: “.”,代表此层目录 “..”,代表上一层目录 “-”,代表前一个工作目录 “~”,代表“目前用户身份”所在的主文件夹 “~account”,代表account这个用户的主文件夹(acc ...

  2. Educational Codeforces Round 55 (Rated for Div. 2) D. Maximum Diameter Graph (构造图)

    D. Maximum Diameter Graph time limit per test2 seconds memory limit per test256 megabytes inputstand ...

  3. 洛谷 P2866 [USACO06NOV]糟糕的一天Bad Hair Day 牛客假日团队赛5 A (单调栈)

    链接:https://ac.nowcoder.com/acm/contest/984/A 来源:牛客网 题目描述 Some of Farmer John's N cows (1 ≤ N ≤ 80,00 ...

  4. 你真的懂git rebase吗?

    前段时间由于某种原因,开始接手开发公司前端Vue搭建的项目 该前端项目采用的是基于git rebase的形式去合并代码,而我之前使用git一直都是采用merge的形式合并分支代码,对于rebase一概 ...

  5. Jackson常用工具类

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11983194.html Demo package org.fool.util; import com. ...

  6. Docker(三):Docker入门教程-CentOS Docker 安装

    CentOS Docker 安装 Docker支持以下的CentOS版本: CentOS 7 (64-bit) CentOS 6.5 (64-bit) 或更高的版本 前提条件 目前,CentOS 仅发 ...

  7. [洛谷P1864] NOI2009 二叉查找树

    问题描述 已知一棵特殊的二叉查找树.根据定义,该二叉查找树中每个结点的数据值都比它左儿子结点的数据值大,而比它右儿子结点的数据值小. 另一方面,这棵查找树中每个结点都有一个权值,每个结点的权值都比它的 ...

  8. C#删除文件夹的文件

    using System.IO; //判断文件是不是存在if(File.Exists(@"文件路径")){//如果存在则删除File.Delete(@"文件路径" ...

  9. JSP文件的上传和下载

    文件上传下载,与传统的方式不同,这里能够上传和下载10G以上的文件.而且支持断点续传. 通常情况下,我们在网站上面下载的时候都是单个文件下载,但是在实际的业务场景中,我们经常会遇到客户需要批量下载的场 ...

  10. 超大文件上传方案(ASP.NET)

    ASP.NET上传文件用FileUpLoad就可以,但是对文件夹的操作却不能用FileUpLoad来实现. 下面这个示例便是使用ASP.NET来实现上传文件夹并对文件夹进行压缩以及解压. ASP.NE ...