[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界面应用技术大大的丰富了网站的表现形式,本文将为您 ...
随机推荐
- Linux之目录与路径
特殊的目录: “.”,代表此层目录 “..”,代表上一层目录 “-”,代表前一个工作目录 “~”,代表“目前用户身份”所在的主文件夹 “~account”,代表account这个用户的主文件夹(acc ...
- 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 ...
- 洛谷 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 ...
- 你真的懂git rebase吗?
前段时间由于某种原因,开始接手开发公司前端Vue搭建的项目 该前端项目采用的是基于git rebase的形式去合并代码,而我之前使用git一直都是采用merge的形式合并分支代码,对于rebase一概 ...
- Jackson常用工具类
原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11983194.html Demo package org.fool.util; import com. ...
- Docker(三):Docker入门教程-CentOS Docker 安装
CentOS Docker 安装 Docker支持以下的CentOS版本: CentOS 7 (64-bit) CentOS 6.5 (64-bit) 或更高的版本 前提条件 目前,CentOS 仅发 ...
- [洛谷P1864] NOI2009 二叉查找树
问题描述 已知一棵特殊的二叉查找树.根据定义,该二叉查找树中每个结点的数据值都比它左儿子结点的数据值大,而比它右儿子结点的数据值小. 另一方面,这棵查找树中每个结点都有一个权值,每个结点的权值都比它的 ...
- C#删除文件夹的文件
using System.IO; //判断文件是不是存在if(File.Exists(@"文件路径")){//如果存在则删除File.Delete(@"文件路径" ...
- JSP文件的上传和下载
文件上传下载,与传统的方式不同,这里能够上传和下载10G以上的文件.而且支持断点续传. 通常情况下,我们在网站上面下载的时候都是单个文件下载,但是在实际的业务场景中,我们经常会遇到客户需要批量下载的场 ...
- 超大文件上传方案(ASP.NET)
ASP.NET上传文件用FileUpLoad就可以,但是对文件夹的操作却不能用FileUpLoad来实现. 下面这个示例便是使用ASP.NET来实现上传文件夹并对文件夹进行压缩以及解压. ASP.NE ...