[Web 前端] 010 css 常用的边框设置
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 常用的边框设置的更多相关文章
- 好程序员web前端分享css常用属性缩写
好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...
- [Web 前端] 009 css 常用的文本样式设置
常用的文本 css 样式 概览 参数 释义 举例 color 设置文字的颜色 color:red; font-size 设置文字的大小 font-size:12px; font-family 设置文字 ...
- 【WEB前端】CSS常用选择器
1.1 标签选择器 就是用标签名来当做选择器. 1) 所有标签都能够当做选择器,比如body.h1.dl.ul.span等等 2) 不管这个标签藏的多深,都能够被选择上. 3) 选择的是所有的,而不是 ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- Python web前端 01 HTML常用标签
Python web前端 01 HTML常用标签 一.HTML创建项目 file ---->new project -----> 输入项目名------>创建文件夹 new dicr ...
- Python web前端 02 CSS
Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...
- Python web前端 03 CSS属性
Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...
- 好程序员web前端分享CSS元素类型
好程序员web前端分享CSS元素类型 目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依 ...
- 必知干货：Web前端应用十种常用技术你全都知道吗？
Web前端应用十种常用技术,随着JS与XHTML的应用普及,越来越多的web界面应用技术出现在网站上,比如我们常见的日历控件,搜索下拉框等,这些web界面应用技术大大的丰富了网站的表现形式,本文将为您 ...
随机推荐
- N^2取N
序列合并 有两个长度都是N的序列A和B,在A和B中各取一个数相加可以得到N^2个和,求这N^2个和中最小的N个. 先把A B排序 然后pushA[1]+B[i](1<=i<=n)每次取出一 ...
- hdu 1059 Dividing bitset 多重背包
bitset做法 #include <bits/stdc++.h> #define PI acos(-1.0) #define mem(a,b) memset((a),b,sizeof(a ...
- MUI使用h5+进行召唤各大APP应用市场调用启动的包名和方式
转载自:https://blog.csdn.net/u012442504/article/details/87367153 // 扩展API加载完毕后调用onPlusReady回调函数 documen ...
- Kafka---系统学习
1.Topics 1.1.Topic 就是 数据主题: 1.2.作用:数据记录 发布的地方,用来 区分 业务系统: 1.3.每个Topic 可以有多个 消费者 订阅它的数据: 1.4.每个T ...
- 【leetcode】390. Elimination Game
题目如下: 解题思路:对于这种数字类型的题目,数字一般都会有内在的规律.不管怎么操作了多少次,本题的数组一直是一个等差数列.从[1 2 3 4 5 6 7 8 9] -> [2 4 6 8] - ...
- Vue Vue项目目录结构梳理
Vue项目目录结构梳理 by:授客 QQ:1033553122 1. 结构梳理 . ├── build/ # webpack 配置文件: │ ...
- javascript 通用定义
通用约定 注释 原则 As short as possible(如无必要,勿增注释):尽量提高代码本身的清晰性.可读性. As long as necessary(如有必要,尽量详尽):合理的注释.空 ...
- makefile 打印
$(warning ----------$(abc)) $(info -----------------$(abc))
- [luogu]P3938 斐波那契[数学]
[luogu]P3938 斐波那契 题目描述 小 C 养了一些很可爱的兔子. 有一天,小 C 突然发现兔子们都是严格按照伟大的数学家斐波那契提出的模型来进行 繁衍:一对兔子从出生后第二个月起,每个月刚 ...
- 基于点云的3ds Max快速精细三维建模方法及系统的制作方法 插件开发
基于点云的3ds Max快速精细三维建模方法及系统的制作方法[技术领域][0001]本发明涉及数字城市三维建模领域,尤其涉及一种基于点云的3d ...