css边框属性一览(css背景和边框标签实例详解)
css边框属性一览
css背景和边框标签实例详解 一、css背景标签1,设置背景颜色
back-ground-color 属性指定元素的背景色。
小实例如下图所示:
运行结果如下:
可以通过选择器给不同的标签设置不同的颜色,在这里h1,li,和p标签将拥有不同的背景色:
实例:
运行结果如下图所示:
2.设置背景图像
background-image属性指定用作元素背景的图像。默认情况下,图像会重复,以覆盖整个元素。用url来引入外部图片。
具体实例如下所示:
运行结果如下图:
注意事项:使用背景图片时,要注意背景图片的样式,不要有干扰到文本的图像,以免影响效果。
css背景重复的问题
默认情况下,background-repeat属性在垂直和水平方向上都重复图像。某些图像应只适合水平或垂直方向上重复,若想仅在水平方向上重复,需要用(background-repeat:repeat-x;),则背景看起来更好;若想要仅在垂直重复图像,需设置background-repeat:repeat-y;
属性还可以指定只显示一次背景图像:用background-repeat:no-repeat标签即可。
4、指定背景图像的位置
指定背景图像的位置需要使用background-position标签
具体实例如下图所示:
下面将会展示把背景图片放在右上角的代码:
运行结果如下图所示:
5、设置背景图像固定
background-attachment 属性来设置背景图像固定,其属性值scroll图像随页面元素一起滚动(默认值),fixed图像固定在屏幕上,不随页面元素滚动。
6、设置背景图像大小
background-size 属性可以设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果设一个值,则第二个值会默认auto。其格式如下所示:
background-size:属性1 属性2;
实例如下:
运行结果如下:
7、设置图像透明效果
使用opacity属性能够使任何元素能够使任何元素呈现出透明效果,透明度在0~1之间,其格式如下:
opacity:opacityValue;
1.设置边框颜色
(1)设置边框样式(border-style)
边框样式用于定义边框的风格,常用属性值如下:
none: 没有边框即忽略所有边框的宽度(默认值)。
solid:边框为单实线。
dashed:边框为虚线。
dotted: 边框为点线。
double:边框为双实线。
既可以对盒子的单边进行设置,也可以综合设置四条边的样式。使用border-style属性综合设置四边样式时,必须按照上右下左的顺时针顺序;省略时采用值复制的原则,即一个值为四条边;两个值为上下/左右;三个值为上/左右/下。
border-top-style: 上边框样式
border-right-style:右边框样式。
borer-bottom-style:下边框样式。
border-left-style:下边框样式。
border-style:上边框样式 右边框样式 下边框样式 左边框样式
border-style: 上边框样式 左右边框样式 下边框样式。
border-style:上下边框样式 左右边框样式。
border-style:上下左右边框样式。
(2)设置边框宽度(border-width)
border-width 属性用于设置边框的宽度,其格式如下
border-width:上边[右边 下边 左边];
在上面的语法格式中,border-with 属性常用取值单位像素px。并且同样遵循值复制的原则,其属性值可以设置1~4个,即一个值为四边,两个值为上下/左右,三个值为上/左右/下,四个值为上/右/下/左。具体如下:
border-top-width: 上边框宽度
border-right-width:右边框宽度。
borer-bottom-width:下边框宽度。
border-left-width:下边框宽度。
border-width:上边框宽度 右边框宽度 下边框宽度 左边框宽度
border-width: 上边框宽度 左右边框宽度 下边框宽度。
border-width:上下边框宽度 左右边框宽度。
border-width:上下左右边框宽度。
(3)设置边框颜色(border-color)
border-color属性用于设置边框颜色,其格式如下:
border-color:上边[右边 下边 左边];
设置边框样式的同时必须设置边框样式,如果未设置样式或者设置为none,则其他的边框属性无效。边框颜色的单边与综合设置,顺时针顺序,与上面的宽度和样式属性的设置规则相同,在这里就不一一描述了。
(4)综合设置边框
border-top:上边框宽度 样式 颜色。
border-reight:右边框宽度 样式 颜色
border-bottom:下边框宽度 样式 颜色
border- left:左边框宽度 样式 颜色
border:四边宽度 样式 颜色
(5)圆角边框
border-radius属性用于向元素添加圆角边框:
其语法格式如下图所示:
border-radius:参数1/参数2
其中“参数1”表示圆角的水平半径,“参数2”表示圆角的垂直半径,两个参数之间用“/”隔开。需要注意的是,在使用border-raidius属性时,如果第二个参数省略,则会默认等于第一个参数。通过border-radius设置边框圆角。
到此这篇关于css背景和边框标签总结的文章就介绍到这了,更多相关css背景与边框内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
- css导航栏字怎么分开设置(纯CSS实现导航栏Tab切换效果)
- 怎么样能写出兼容多个浏览器的css(主流浏览器css兼容问题汇总)
- css的列表符号怎么设置(reset.css引入以及1px边框问题的解决方法)
- html5css3旋转特效效果(一款利用html5和css3实现的3D立方体旋转效果教程)
- css安全模式(仅针对IE8有效的CSS Hack猎奇写法)
- css3边框阴影的属性(css3 border-radius属性详解)
- js里咋样设置css里面的属性(css不常见属性之pointer-events的使用方法)
- CSS网页布局的几个建议
- 为什么网页不显示css效果(网页布局中CSS样式无效的十个重要原因详解)
- css3实现凸起效果(CSS3轻松实现圆角效果)
- webpack打包后css路径(Webpack 中 css import 使用 alias 相对路径的方法)
- css行高line-height的用法
- css3编程实战(详解CSS3开启硬件加速的使用和坑)
- css标签及属性的语法规则(详解CSS 伪元素及Content 属性)
- css语言是干嘛的(Css预编语言及区别详解)
- css3边框讲解(六种css3实现的边框过渡效果)
- 追连续剧,品古今联4 明代三杨,联妙诗佳(追连续剧品古今联4)
- 三杨 共辅四朝帝王,构建明帝国内阁行政圈(三杨共辅四朝帝王)
- 红色文化进国企(红色文化进国企)
- 车友的选择| 轮毂该如何选(车友的选择轮毂该如何选)
- 秦海璐炫耀和王新军热恋蜜事,不料对方吐槽她吃饱后肚子撅老高(秦海璐炫耀和王新军热恋蜜事)
- 秦海璐一袭旗袍惹人倾心,将高级与淡雅展现的游刃有余(秦海璐一袭旗袍惹人倾心)
热门推荐
- apache 配置域名(apache 二级域名解析 window与linux)
- thinkphp标签详解(thinkphp整合系列之极验滑动验证码geetest功能)
- mysql变量技巧(mysql用户变量与set语句示例详解)
- linux看系统内存大小(Linux体检,了解你的Linux状态网络IO,磁盘,CPU,内存)
- dedecms中的有些功能如何修改(DedeCms参考手册、函数及文件大全)
- gitlablinux安装配置(Ubuntu20.04安装配置GitLab的方法步骤)
- python如何新建虚拟环境(详解如何管理多个Python版本和虚拟环境)
- pandas 导入数据库(详解pandas的外部数据导入与常用方法)
- 搬瓦工用哪个端口号(搬瓦工bandwagon服务器购买及初步环境搭建图文教程)
- docker怎样安装mysql8(docker-compose安装db2数据库操作)