css背景和边框标签实例详解


Posted in HTML / CSS onMay 21, 2021

 一、css背景标签

1,设置背景颜色

back-ground-color 属性指定元素的背景色。
小实例如下图所示:

css背景和边框标签实例详解

运行结果如下:

css背景和边框标签实例详解

可以通过选择器给不同的标签设置不同的颜色,在这里h1,div,和p标签将拥有不同的背景色:
实例:

css背景和边框标签实例详解

运行结果如下图所示:

css背景和边框标签实例详解

2.设置背景图像

background-image属性指定用作元素背景的图像。默认情况下,图像会重复,以覆盖整个元素。用url来引入外部图片。
具体实例如下所示:

css背景和边框标签实例详解

运行结果如下图:

css背景和边框标签实例详解

注意事项:使用背景图片时,要注意背景图片的样式,不要有干扰到文本的图像,以免影响效果。

css背景重复的问题
默认情况下,background-repeat属性在垂直和水平方向上都重复图像。某些图像应只适合水平或垂直方向上重复,若想仅在水平方向上重复,需要用(background-repeat:repeat-x;),则背景看起来更好;若想要仅在垂直重复图像,需设置background-repeat:repeat-y;
属性还可以指定只显示一次背景图像:用background-repeat:no-repeat标签即可。

4、指定背景图像的位置

指定背景图像的位置需要使用background-position标签
具体实例如下图所示:
下面将会展示把背景图片放在右上角的代码:

css背景和边框标签实例详解

运行结果如下图所示:

css背景和边框标签实例详解

5、设置背景图像固定

background-attachment 属性来设置背景图像固定,其属性值scroll图像随页面元素一起滚动(默认值),fixed图像固定在屏幕上,不随页面元素滚动。

6、设置背景图像大小

background-size 属性可以设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果设一个值,则第二个值会默认auto。其格式如下所示:
background-size:属性1 属性2;
实例如下:

css背景和边框标签实例详解

运行结果如下:

css背景和边框标签实例详解

7、设置图像透明效果

使用opacity属性能够使任何元素能够使任何元素呈现出透明效果,透明度在0~1之间,其格式如下:
opacity:opacityValue;

二、css边框标签

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背景与边框内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3画一个阴阳八卦图
Mar 09 HTML / CSS
CSS3截取字符串实例代码【推荐】
Jun 07 HTML / CSS
CSS3动画之利用requestAnimationFrame触发重新播放功能
Sep 11 HTML / CSS
CSS3制作日历实现代码
Jan 21 HTML / CSS
CSS3实现酷炫的3D旋转透视效果
Nov 21 HTML / CSS
html5 canvas-2.用canvas制作一个猜字母的小游戏
Jan 07 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
Jun 16 HTML / CSS
HTML5制作3D爱心动画教程 献给女友浪漫的礼物
Nov 05 HTML / CSS
html5表单及新增的改良元素详解
Jun 07 HTML / CSS
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
Jan 10 HTML / CSS
canvas实现按住鼠标移动绘制出轨迹的示例代码
Feb 05 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
Jun 03 HTML / CSS
详解CSS开发过程中的20个快速提升技巧
web前端之css水平居中代码解析
关于flex 上下文中自动 margin的问题(完整例子)
CSS的class与id常用的命名规则
CSS 制作波浪效果的思路
HTML通过表单实现酒店筛选功能
面试必问:圣杯布局和双飞翼布局的区别
May 13 #HTML / CSS
You might like
基于数据库的在线人数,日访问量等统计
2006/10/09 PHP
分享一下贝贝成长进度的php代码
2012/09/14 PHP
PHP连接Access数据库的方法小结
2013/06/20 PHP
解析php函数method_exists()与is_callable()的区别
2013/06/21 PHP
PHP 面向对象程序设计(oop)学习笔记(一) - 抽象类、对象接口、instanceof 和契约式编程
2014/06/12 PHP
php文件缓存类汇总
2014/11/21 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
Laravel框架控制器,视图及模型操作图文详解
2019/12/04 PHP
js 动态选中下拉框
2009/11/26 Javascript
javascript中的float运算精度实例分析
2010/08/21 Javascript
JS拖动技术 关于setCapture使用
2010/12/09 Javascript
JavaScript判断是否为数组的3种方法及效率比较
2015/04/01 Javascript
JavaScript检测鼠标移动方向的方法
2015/05/22 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
用iframe实现不刷新整个页面上传图片的实例
2016/11/18 Javascript
使用jQuery卸载全部事件的思路详解
2017/04/03 jQuery
使用vue根据状态添加列表数据和删除列表数据的实例
2018/09/29 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
2020/08/21 Javascript
OpenLayers3加载常用控件使用方法详解
2020/09/25 Javascript
Python合并字符串的3种方法
2015/05/21 Python
python图像处理之镜像实现方法
2015/05/30 Python
Python文本特征抽取与向量化算法学习
2017/12/22 Python
Python 12306抢火车票脚本
2018/02/07 Python
python ctypes库2_指定参数类型和返回类型详解
2019/11/19 Python
keras 特征图可视化实例(中间层)
2020/01/24 Python
Python 跨.py文件调用自定义函数说明
2020/06/01 Python
手把手教你配置JupyterLab 环境的实现
2021/02/02 Python
HTML5的结构和语义(5):内嵌媒体
2008/10/17 HTML / CSS
美国女士时尚珠宝及配饰购物网站:Icing
2018/07/02 全球购物
美国运动鞋类和服装零售连锁店:Shoe Palace
2019/08/13 全球购物
拉夫劳伦爱尔兰官方网站:Ralph Lauren爱尔兰
2020/04/10 全球购物
大学生演讲稿范文
2014/01/11 职场文书
自主招生自荐信指南
2014/02/04 职场文书
企业标语大全
2014/07/01 职场文书
2015小学教师德育工作总结
2015/05/12 职场文书
Python实现拼音转换
2021/06/07 Python