css网页边框样式代码,css3边框样式(示例代码)
我们在设计网页样式的时候,经常会用到边框,那么css中的边框具体有哪些样式呢,下面我们来看。
首先,在css中设置border的时候,我们一般给给出三个值,线条样式,线条粗细,线条颜色。
以上的三个值,线条样式是必须要设置的,否则边框则无法显示到页面上,border的线条样式有四种,分别是:
实线(solid)
点线(dotted)
双实线(double)
虚线(dashed)
粗细和颜色可以默认,粗细默认是3px,颜色是根据当前元素的文本颜色决定的。
所以我们一般在初始border的时候可以这样写:元素名称.{border:solid 1px red;},同时将三个值设定好
然后我们来看border除了默认出现四个框之外还能有哪些应用。
第一,使用border划出分割线
我们知道,在html中可以使用hr来划出分割线,但是hr的分割线无法设置粗细样式,使用起来很不方便。
于是我们可以使用border来给某个元素设置一个上边框或者下边框来实现分割线的效果。
具体代码如下:
p{border-bottom:solid 1px red;}
表示给p元素设置了一个1px的红色下框线,再调整一下border的位置,就实现了分割线的效果。
同样也可以选择使用border其他边线来设置成不同的效果
第二,使用border给元素形状添加圆角效果
我们在网页中看到的元素块不仅仅是方方正正的矩形,有时候会出现圆角,那么是怎么实现的呢?
也是border边框的应用。
代码是p:{border:solid 1px red;
border-radius:3px;}
表示给p元素加了一个半径为3px的圆角,3px表示圆角的弧度大小,值越高,弧度越大
必须先给出border的样式才能设置圆角,否则无法在页面显示。
以上,就是css中border边框的一些实际应用,还有更多的样式让我们一起来发现。
css网页边框样式代码,css3边框样式(示例代码)相关推荐
- html导航去下划线,纯CSS实现导航栏下划线跟随的示例代码
本篇文章主要介绍了纯CSS实现导航栏下划线跟随的示例代码,分享给大家,具体如下: 效果: 代码: html: aaaa bbbbbbb cccc dddd eeee css: ul { padding ...
- html常规的布局模版,html5/css3常规布局(示例代码)
简介这篇文章主要介绍了html5/css3常规布局(示例代码)以及相关的经验技巧,文章约2644字,浏览量165,点赞数6,值得推荐! content="initial-scale=1.0, ...
- html中亮度怎么写,HTML+CSS+JS模仿win10亮度调节效果的示例代码
HTML+CSS+JS模仿win10亮度调节效果 代码 模仿win10的亮度调节 .control_bar{ height:200px; width:500px; border-bottom:3px ...
- css实现文字中间横线,css实现文字居中两边横线效果的示例代码
本文介绍了css实现文字居中两边横线效果的示例代码,分享给大家,具体笔记如下: 效果: content="width=device-width, user-scalable=no, init ...
- html做一页关于时间轴的网站,前端css实现最基本的时间轴的示例代码
本文介绍了前端css实现最基本的时间轴的示例代码,分享给大家,具体如下: 原型: 代码: 状态详情 #timeleft div { height: 65px; color: #333333; } #t ...
- html设置%3cbody%3e背景颜色,使用css写带纹理渐变背景图的示例代码
项目中页面长度大概在2000px以上,再加上背景图是带纹理和渐变的,所以加载起来会很大很耗费时间,所以就改用css实现了. 这个网站中有很多现成的背景,也可以自定义背景色,纹样的颜色和透明度. 网站中 ...
- html边框背景图片,css3 边框、背景、文本效果的实现代码
一.边框 box-shadow box-shadow: h-shadow v-shadow blur spread color inset(ontset); //h-shadow:水平阴影 v-sha ...
- html语言闪烁特效代码,css3 文字闪烁特效代码
今天给大家分享几个文字闪烁特效代码,纯css3代码实现,对于新手小伙伴值得拿来学习一下. 文字闪烁特效一 通过改变透明度来实现文字的渐变闪烁,代码如下: 文字闪烁:闪烁效果 .main{ color: ...
- linux mv编写代码,Linux命令--mv(示例代码)
简介这篇文章主要介绍了Linux命令--mv(示例代码)以及相关的经验技巧,文章约4069字,浏览量253,点赞数7,值得推荐! Linux--mv mv经常被用来做备份 命令参数: -b :若需覆盖 ...
- ABOV单片机内部中断优先级寄存器IP1x/IPx的设置代码实现讲解及示例代码-[MC96F6332D]
一.准备工作 1.KEIL C51编译环境 2.外部中断EINT示例代码-MC96F6332D 3.MC96F6332D 开发板 4.USB-OCD II仿真器 二.代码部分 1.现代单片机MC96F ...
最新文章
- 《预训练周刊》第34期:使用图像级监督检测两万个类别、BigScience寻求建立强大的开放语言模型...
- 在Android界面上显示和获取Logcat日志输出
- wxPython python3.x下载地址
- 【OpenCV 例程200篇】03. 图像的显示(cv2.imshow)
- oracle监听服务无法启动不了,关于ORACLE监听服务无法启动的问题
- 数量查看_正则表达式学习之分割字符及数量词练习
- 好用的Android抓包神器 VNET
- python + 夜神模拟器 + appium 小红书app数据抓取
- [CF296D] Greg and Graph [floyd]
- 图像与视频的Alpha通道
- 蓝桥杯 人民币金额大写 格式转换
- 史上最全Java学习路线
- 基于网格化的主干光缆纤芯配置模型
- 头牌知产介绍速冻水饺商标属于哪一类
- 微信中H5+java+vue获取微信定位等JS-SDK
- python列表题目_Python列表练习题
- C语言兔子生兔子问题
- matlab快速入门(25):匿名函数+主函数子函数
- 第32节-事件-情形-动作(Events-Cases-Actions) | 剑雨Axure RP9系列【基础】
- ubuntu16.04 titan rtx 24g +显卡驱动+cuda10.1+cudnn环境配置
热门文章
- 为Metabase Pulses添加slack代理支持
- 存储运维知识点记录(netapp,华为,HP-3par,emc)
- php怎么设置段落之间的距离,html中P标签段落与CSS段落间距距离调整
- 幼儿园计算机技能大赛,幼儿园教师技能大赛的心得体会.docx
- html p首字母缩进,html里p标签里面如何让每一行首行缩进两格???
- PERL-5.26.1安装教程(LINUX系统)
- 如何打开Win10启动文件夹?
- 联想笔记本声音太小怎么办_笔记本声音太小,小编告诉你笔记本电脑声音太小解决方法...
- 【天坑】BLAST比对序列时遭受的痛苦
- Altium Designer基础PCB布局布线