CSS之背景样式及边框样式
2024-04-02 14:14:49
1、背景样式
- 常用属性：
- background-color：背景颜色
- background-image：背景图片
- background-repeat：背景图片的平铺方式
- background-position：背景图片的位置
- background-attachment：背景图随滚动条的移动方式
- 代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS背景样式</title><style>#div1{background-color: rgb(234, 22, 22); height: 100px; width: 200px;}#div2{background-color:aqua ; background-image : url(./dog.jpg); height: 300px; width: 300px;}#div3{background-color:rgb(132, 255, 0) ; background-image : url(./dog.jpg); height: 300px; width: 300px; background-repeat: repeat-x;}#div4{background-color:rgb(255, 255, 0) ; background-image : url(./dog.jpg); height: 300px; width: 300px; background-repeat: repeat-y;}#div5{background-color:rgb(255, 0, 255) ; background-image : url(./dog.jpg); height: 300px; width: 300px; background-repeat: no-repeat;}</style>
</head>
<body><h2>测试容器1，颜色填充:</h2><div id="div1"></div><h2>测试容器2，图片填充，背景默认填充:</h2><div id="div2"></div><h2>测试容器2，图片填充，背景repeat-x填充</h2><div id="div3"></div><h2>测试容器2，图片填充，背景repeat-y填充</h2><div id="div4"></div><h2>测试容器2，图片填充，背景no-repeat填充</h2><div id="div5"></div>
</body>
</html>
- 结果展示
2、滚动背景样式
- 属性说明：
- 背景图片默认属性：background-attachment: scroll
- 滚动背景图片设置属性：background-attachment: fixed
- 代码展示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>滚动背景样式</title><style>body{height: 2000px;} /* 没有设置body大小，显示不出来 */#div1{background-image: url(./2.jpg); height: 50%; width: 100%; background-attachment: fixed;}/* 这里高和宽都也可以用px来设定 */#div2{background-image: url(./3.jpg); height: 50%; width: 100%; background-attachment: fixed;}/* 这里高和宽都也可以用px来设定 */</style>
</head>
<body><div id="div1"></div><div id="div2"></div>
</body>
</html>
- 结果展示
3、边框样式
- border-style：边框的样式
- border-width：边框的大小
- border-color：边框的颜色
- 针对一条边也可以单独设置
- 代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>边框样式</title><style>body{background-color: green;}#d1{height: 100px;width: 100px;border-color:red;border-top-style: dashed;border-bottom-style: dotted;border-right-style: double;border-left-style: solid;border-width: 3px;}#d2{height: 100px;width: 100px;border-color:rgb(255, 0, 251);border-style: dotted; border-width: 3px;}#d3{height: 100px;width: 100px;border-top-style: dashed;border-bottom-style: dotted;border-right-style: double;border-left-style: solid;border-width: 3px;border-top-color: aqua;border-bottom-color:blue;border-right-color: blueviolet;border-left-color: black;}#d4{height: 0px; width: 0px; /* 这里的宽高是指对于模块内部宽高，做三角型的话，这里宽高设置为0 */border-top-color: red;border-top-width: 30px;border-top-style: solid;border-bottom-color: transparent;/* transparent是透明色，这样设置不论网页背景是什么颜色，都可以隐藏不需要显式的边 */border-bottom-width: 30px;border-bottom-style: solid;border-right-color: transparent;border-right-width: 30px;border-right-style: solid;border-left-color: transparent;border-left-width: 30px;border-left-style: solid;}#d5{height: 0px; width: 0px; /* 这里的宽高是指对于模块内部宽高，做三角型的话，这里宽高设置为0 */border-top-color: transparent;border-top-width: 30px;border-top-style: solid;border-bottom-color: red;border-bottom-width: 30px;border-bottom-style: solid;border-right-color: transparent;border-right-width: 30px;border-right-style: solid;border-left-color: transparent;border-left-width: 30px;border-left-style: solid;} </style>
</head>
<body><h2>设置第一种边框样式：给每条边都设置样式</h2><div id="d1"></div><h2>设置第二种边框样式：整体边框设计</h2><div id="d2"></div><h2>设置第三种边框样式：给每条边设置颜色</h2><div id="d3"></div><h2>通过边框做一个向下的三角形：</h2><!-- 利用边框拼接的原理和透明颜色transparent --><div id="d4"></div><h2>通过边框做一个向上的三角形：</h2><!-- 利用边框拼接的原理和透明颜色transparent --><div id="d5"></div>
</body>
</html>
- 结果展示
总结：
- 背景设置可以指定对应模块，也可以给真个页面都设置，要注意style和对应div关联方式是通过#和id来关联相同关键字
- 边框设置要注意边框样式、边框宽度、边框颜色的基础设置
CSS之背景样式及边框样式相关推荐
- 字体样式，文本样式，背景样式，边框样式，线性渐变，伪类选择器，css权重
`## CSS入门基础(二) 字体样式 字体类型 font-family 字体大小 font-size 字体粗细 font-weight 100-700 400=normal 700=bold 字体得 ...
- 纯css实现带斜角的边框样式
纯css实现带斜角的边框样式,是边框哦 展示效果 斜角优化前(百度上找到的方法) 斜角优化后(想了个花里胡哨的办法) 直接贴代码 说明下原理 展示效果 斜角优化前(百度上找到的方法) 斜角优化后(想了 ...
- css设置html表格边框颜色,互联网常识：CSS如何设置htmltable表格边框样式
设置表格边框样式的方法:1.给table元素添加"border:边框宽度 边框样式 边框颜色"样式,可给整个表格设置边框样式:2.给td元素添加"border:边框宽度 ...
- EasyExcel 批量设置单元格样式（字体样式、底纹样式、边框样式、对齐方式、自动换行、旋转文字、竖向文字、数据格式、自动收缩）
目录 1 Maven配置 2 CellStyleModel 3 CustomCellStyleHandler 4 调试代码 5 调试结果 注: 1 Maven配置 <!--hutool工具包-- ...
- css常用样式（文字样式、边框样式、背景样式）
CSS常用样式 CSS常用文字样式 color: brown; /*文字颜色*/ /*color: #333333;这样的也可以,这种颜色的表示方法是RGB的方式,没两位数表示一种颜色的度数, 一般情 ...
- CSS中添加背景图+盒子边框样式
background-image背景图 *设置图片为背景.* background-image:url("图片路径"): background-size :设置背景图片的大小 属性 ...
- CSS设置原生table表格边框样式（添加表格横线）（附最后表格td画斜线）
table表格边框样式: 推荐这种 原理: 只对table td设置左与上边框: 对table设置右与下边框: <style> .table-c table{border-right:1p ...
- css。元素样式、边框样式
1.外边距 margin 缩写形式: margin:上边距 右边距 下边距 左边距 margin:上下边距 左右边距 margin:上边距 左右边距 下边距 2.内边距 padding 缩写形式: p ...
- 【CSS】 画优惠券锯齿边框样式
红色左右锯齿样式: <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
最新文章
- 如何使用Docker暴露多个端口？
- 长按不响应_长周期物料的预测：需求预测的一大难点
- Boostrap技能点整理之【按钮样式】
- 【渝粤教育】电大中专药品储存与养护技术 (2)作业 题库
- jquery 获得table 行数
- Madagascar的自定义浮点型函数--对数函数
- 文本主题模型之LDA(二) LDA求解之Gibbs采样算法
- 用CSS实现一个易于换肤的移动导航栏
- ACdream 1728 SJY's First Task
- 使用 Document!X 为自己的dll生成一个漂亮的说明文档
- 文件编程概念（C语言库函数系统调用API）
- g4600黑苹果efi_超详细黑苹果安装图文教程送EFI配置合集及系统
- 单点登录cas常见问题(十四) - ST和TGT的过期策略是什么？
- 操作系统的位数决定寻址空间
- 句法分析 依存句法分析
- 范德堡计算机科学硕士,美国范德堡大学计算机科学专业怎么样？
- [阅读笔记] 联邦学习攻防综述 An Overview of Federated Deep Learning Privacy Attacks and Defensive Strategies
- [vue-router] Named Route ‘Layout‘ has a default child route. When navigating to this named route (:t
- USDT信用卡和转账入账接口
- redis分布式锁解决方案