CSS之背景样式及边框样式

最新推荐文章于 2024-03-06 20:44:31 发布
最新推荐文章于 2024-03-06 20:44:31 发布
阅读量983 收藏
点赞数
分类专栏： web前端 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sz1125218970/article/details/128261572
版权

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来关联相同关键字
  • 边框设置要注意边框样式、边框宽度、边框颜色的基础设置
疋瓞
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS表格边框50多种精美标签样式(边框也精彩)
07-30
CSS表格边框50多种精美标签样式(边框也精彩) 直接复制就可以用，几乎都是标签样式
css基础-盒子（div）模型、背景属性、边框线的设置、padding、margin、网站的设置思想（float），图片代替列表符号
muzidigbig的博客
11-16 2798
css基础-盒子（div）模型、属性、边框线的设置、padding、margin、网站的设置思想（float），图片代替列表符号
【CSS】CSS 总结 ③ ( CSS 背景设置 | 背景颜色 | 背景图片 | 背景图片平铺样式 | 背景图片位置 | 超大背景图片设置 | 背景附着 | 背景样式简写 | 背景半透明 ) ★
最新发布
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-06 1330
一、CSS 背景设置 1、背景颜色 2、背景图片 3、背景图片平铺样式 4、背景图片位置 5、超大背景图片设置 网页背景兼容问题 超大背景图片推荐定位 超大背景图片编辑策略 6、背景附着 7、背景样式简写 8、背景半透明
css里面设置一个背景边框图片或者填充一张图片，使图片填充整个div容器；
m0_64053511的博客
06-05 6132
图中的红色边框是div的大小，正好填充完全图中的红色边框是div的大小，正好填充完全
css背景和边框标签总结
m0_56329037的博客
04-24 2993
css重要标签总结 一、css背景标签 1，设置背景颜色 back-ground-color 属性指定元素的背景色。 小实例如下图所示： 运行结果如下： 可以通过选择器给不同的标签设置不同的颜色，在这里h1,div,和p标签将拥有不同的背景色： 实例： 运行结果如下图所示： 2.设置背景图像 background-image属性指定用作元素背景的图像。默认情况下，图像会重复，以覆盖整个元素。用url来引入外部图片。 具体实例如下所示： 运行结果如下图： 注意事项：使用背景图片时，要注意背景图片的样式，不要
9个很棒的CSS边框技巧
web前端入门基础进阶教程-htmlcssjs
05-18 2042
如果您是前端开发人员，那么几乎每天都会使用CSS边框。我发现了一些可以在您的项目中使用的有用的技巧。 开始吧！ 1. 动画CSS边框 当我们想使我们的项目更可见时，该怎么办？ 来给它做个动画！ 我们可以对我们的边框进行动画化处理，甚至在不改变元素大小的情况下也可以进行动画化处理，非常简单。 要做到这一点，我们只需要为动画创建一个自定义的关键帧（keyframe），并在元素的CSS代码中的动画（animation）参数中使用它。 让我们看一个例子，HTML如下 <div id="box"> .
CSS（非）实用技巧——背景与边框
SillyLee1的博客
10-14 438
参考 《CSS揭秘》（《CSS Secrets》） 背景 CSS3 尽管“CSS3”这个名词非常流行，但它严格意义上并不是一个规范。因为在CSS2之后，CSS这门语言已经庞大到无法放进单个规范中了，CSS工作组将其分成不同的模块。 其中在CSS2.1已有基础上发展的模块升级到了3这个版本，如： CSS 语法(http://w3.org/TR/css-syntax-3) CSS 层叠与继承(http://w3.org/TR/css-cascade-3) CSS 颜色(http://w3.org
CSS——背景与边框
s310040799的博客
08-05 314
背景 什么是背景？ CSS中的背景可以为HTML文件中设置一个背景图片或是为网页设置一些背景颜色，同时CSS背景可以定位你的背景图片在界面上的具体位置或大小 背景颜色 background-color属性定义了CSS中任何元素的背景颜色。该属性接受任何有效的<color>值，背景颜色可以延申到元素的内容及内边距。 .box { background-color: #ff6455; } h2 { background-color: black; color: white; } .
超实用CSS技巧总结（1）——背景和边框
m0_51156601的博客
10-04 1352
非常好看实用的css技巧
css样式div或li在ie6下背景平铺及border边框断线解决技巧
09-22
css样式div或li在ie6下背景平铺或边框断线解决办法
div+css做的漂亮的框框
05-09
效果预览 http://www.lzlu.com/Google/js/box/box.html以前刚刚学div css的时候老不知道这种漂亮的框该如何布局今天心血来潮，扒了EXT瞧了瞧，原来这么简单放在这里，嘿嘿，不要笑话只是希望没搞过的人不要走弯路了
用CSS样式描述表格Table边框
12-11
style type=”text/css”> TABLE { background: blue; border-collapse: separate; border-spacing: 10pt; border-top: 15px solid red; border-left: 15px solid red; border-right: 5px dashed black; border-...
CSS.rar_css_css样式
09-20
CSS样式表 一般我们可以使用背景图的方式给图片添加阴影，但对于不固定尺寸的图片如何实现呢？ 我们可以采取“视觉欺骗大法”——定义渐变边框来实现
探究CSS边框特效实现技巧
01-19
加入我们有这样一个需求：在一个背景图片的区域中，定义一个带有半透明白色边框的白色div。这个的实现方法最先想到的就是可以为边框定义透明度，代码如下： CSS Code复制内容到剪贴板 div{ background:white; ...
数据可视化大屏的css背景+边框+demo.rar
12-12
7套数据可视化源码和8套数据可视化大屏图片+自定义的部分border+css，非常酷炫
CSS背景边框
qq_42904381的博客
09-05 1176
网页固定背景 ｛ background:url(“.图片地址”) no-repeat; 引入背景图片 background-size:1250px 800px; 背景大小 background-attachment:fixed; 固定背景 ｝ ...
CSS学习（六）——背景，边框
weixin_52725999的博客
03-06 146
背景 背景其实不是很多，能够想到的也就只有背景颜色，和背景图片 背景颜色 <div> background-color="red"; </div> 背景图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{
css好看的边框
c_qianxia5040的博客
03-17 2543
效果图：缝纫线 outline: 1px blue dashed; outline-offset:-5px; 内圆角 outline: 1px blue dashed; outline-offset:-5px; border-radius:10px; box-shadow:0 0 0 5px transparent; 信封 padding:5px; border: 5px solid transparent; background: linear-gradient(white,white)
css 修改table th tr边框样式
06-12
要修改table中th和tr元素的边框样式，可以使用以下CSS样式： ```css table { border-collapse: collapse; /*合并边框*/ } table th, table td { border: 1px solid #ccc; /*设置边框*/ padding: 8px; /*设置...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值