网站（十一）CSS控制边框和背景

最新推荐文章于 2024-07-25 22:03:21 发布
最新推荐文章于 2024-07-25 22:03:21 发布
阅读量189 收藏
点赞数
分类专栏： 学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/KeithAlexander/article/details/80969307
版权

CSS控制边框和背景

定义简单边框

  • Border-width
  • Border-style
  • Border-color
  • Border-radius：弧度边框:x/y

Border简写属性

Border：50px solid red

定义简单背景

  • Background-color
  • Background-image
    • url()
  • Background-size
    • auto：默认
    • contain：按照body大小进行平铺
    • cover：只出现一次，会自身缩放
  • Background-repeat
    • norepeat：不重复，就一张
  • Background-attachment
    • fixed：随着页面一起滚动
    • local：不滚动

Background简写属性

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CreateBorder&Background</title>
    <style type="text/css">
        /*.Servant{
            border-width: 8px;
            border-color: #345cff;
            border-style: inset;
            border-top-color: #fff314;
            border-bottom-style: dashed; 
        }*/
        .Servant{
            /*width: 1920px;
            height: 1080px;
            border: 5px solid red;
            border-top: 10px solid blue;*/
            /*background-color: #ffff00;*/
            background-image: url(桌面壁纸/桌面壁纸-3.png);
            background-size: contain;
            background-repeat: repeat;
        }
    </style>
</head>

<body class="Servant">
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>

</body>

</html>

Result

KeithAlexander
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
实例讲解使用CSS实现多边框和透明边框的方法
web前端基础入门教程
02-25 3585
　Backgrounds & Borders Level 3 还是一份草案的时候，CSS WG 就在是否支持多重边框的问题进行了大量的探讨，就像是讨论多重背景图片一样。不幸的是，当时认为多重边框的用处并不大，即使需要也可以使用border-image属性来模拟。不过，WG显然忘记了在 CSS 代码中灵活地调整边框，才是我们需要的，现在开发者只能使用一些Hack手段来模拟多重边框，比如使用多...
CSS中实现图片边框的酷炫效果
最新发布
jun778895的博客
07-29 1069
在CSS中实现图片边框的酷炫效果是一个既有趣又富有创意的任务，它不仅能够提升网页的视觉吸引力，还能通过不同的样式和动画效果给用户带来更加丰富的视觉体验。以下，我将详细探讨几种使用CSS为图片添加边框的酷炫方法，每种方法都会包含代码示例、适用场景以及可能的扩展思路，以确保内容不低于2500字。
CSS设置网页背景
lh11223326的博客
04-04 3905
我们在制作网页时给网页的背景添加一点东西，能让网页变得更加美观，更能留住用户。
css渐变色背景|＜gradient
weixin_45213317的博客
07-25 600
可以直接将渐变色用作元素的背景，可以看做是一种特殊的背景图片。（是作为背景background一个属性值不是背景颜色的属性值 ）是一种从一种颜色平滑过渡到另一种颜色的效果，由<gradient>数据类型表示，它是<image>的一种特殊类型，由两种或多种颜色之间的渐变过渡构成。<//* 线性渐变 */width;height;background;/* 径向渐变 */width;height;background;
前端学习笔记之——使用边框和背景
前尘忆梦的博客
06-24 890
使用边框和背景 1、应用边框样式 简单边框有三个关键属性：border-width、border-style 和 border-color。 <!DOCTYPE HTML> <html> <head> <title>Example</title> <meta name="author" content="Adam Freeman"/> <meta name="descript
CSS背景设置
wujianrenn的博客
10-30 9906
CSS背景属性：背景颜色设置，背景图片，背景平铺，背景图片位置，背景图片固定，背景样式合写，背景色半透明
一、CSS3-边框
Creationyang的博客
11-11 547
1 CSS   CSS（Cascading Style Sheets，层叠样式表）是用来控制网页在浏览器中的显示外观（如网页的样式、布局等等）的声明式语言。浏览器会根据CSS的样式定义将其选定的元素显示为恰当的形式。一条CSS的样式定义包括属性和属性值，他们共同决定网页的外观。   CSS可以用于给文档添加样式——比如改变标题和链接的颜色和大小。它也可用于创建布局——比如将一个单列文本变成包含主要内容区域和存放相关信息的侧边区域的布局。它甚至还可以用来做一些特效，比如动画。   一条CSS规则包含一个选择符
CSS 边框动画
JNPF快速开发平台的博客
02-24 1342
今天逛博客网站 -- shoptalkshow，看到这样一个界面，非常有意思： 觉得它的风格很独特，尤其是其中一些边框。 嘿嘿，所以来一篇边框特辑，看看运用 CSS，可以在边框上整些什么花样。 border 属性 谈到边框，首先会想到 border，我们最常用的莫过于 solid，dashed，上图中便出现了 dashed。 除了最常见的 solid，dashed，CSS border 还支持 none，hidden， dotted， double， groove， ridge， inset，
css中新型的边框设置属性border-inline
qwguo
04-24 693
是 CSS 逻辑属性的重要组成部分，用于在书写模式无关的情况下设置元素的内联方向边框。掌握并运用这些逻辑属性有助于创建出更灵活、适应性更强的网页布局和样式，特别是在响应式设计和多语言支持场景中。
【CSS】背景样式（颜色、图片、平铺、附着和位置）
翼同学
08-13 1303
设置CSS背景样式，包括颜色、图片、平铺、附着、位置等
CSS3鼠标悬停文字边框背景动画特效
06-11
在本文中，我们将深入探讨如何使用CSS3来创建鼠标悬停时的文字边框背景动画特效。这些效果可以增强用户交互体验，使网站看起来更加生动有趣。我们主要关注五种不同的动画效果，它们分别是：边框从上、下、左、右以及...
虚线边框雪花背景网页模板
01-21
虚线边框与雪花背景是网页设计中常见的元素，它们能为网页增添独特风格和视觉吸引力。本资源提供了一个虚线边框雪花背景的网页模板，适用于创建具有冬季氛围或简洁设计感的网站。 虚线边框在网页设计中常用于区分...
基于html+css的装修网站设计
01-04
HTML的`<img>`标签用于插入图片，而CSS可以控制图片的大小、位置和边框。同时，`<video>`标签可以用于添加视频内容，提升用户体验。 6. 链接和交互： 使用`<a>`标签创建超链接，可以链接到其他页面、电子邮件地址...
不规则形状背景纯css导航菜单
06-05
在创建不规则形状背景的导航菜单时，CSS3引入了一些关键特性，如伪元素、边框半径、渐变、阴影和形状。 1. **伪元素**：在CSS中，伪元素如`:before`和`:after`可以让我们在元素前后添加内容，这在创建不规则形状时...
CSS3蓝色透明方块背景特效
04-06
2. **盒模型**：CSS3的盒模型包括内容区域、内边距、边框和外边距，透明方块的大小调整可以通过修改这些属性实现。 3. **颜色与背景**：CSS3支持更丰富的颜色表示，如十六进制、RGB、RGBA（带有透明度的RGB）。蓝色...
鸟哥的Linux私房菜课后题个人参考答案（第一章）
KeithAlexander的博客
02-24 1647
Linux是什么与如何学习 查询日期：2019.2.23. 最新稳定版本：4.20.12. 开发中版本：5.0-rc7 企鹅的名字：Tux，最原始版本的图片文件https://zh.wikipedia.org/wiki/Tux#/media/File:Crystal_128_penguin.png *Android is a mobile operating system developed b...
《算法第四版》课后练习个人答案（第一章）更新至1.1.34
KeithAlexander的博客
04-07 1423
注意：所有程序默认使用《算法第四版》中附带的algs4.jar包中的函数，下载链接https://algs4.cs.princeton.edu/code/ 1.1.1 a. 7 b. 200.0000002 c. true（Java逻辑表达式运算顺序从左向右） 1.1.2 通过“变量名.getClass().getName()”或者“变量名.getClass().toString()”获得类型 a...
网站（十六）HTML动画与过渡实例
KeithAlexander的博客
07-09 1319
HTML动画与过渡实例 补充 html：hover（当鼠标放在整个网页的任何地方的时候都可以触发） animation-fill-mode：forwards（使得动画停留在最后一帧） opacity（不透明度，为0时透明） div（分块符） &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf...
鸟哥的Linux私房菜课后题个人参考答案（第零章）
KeithAlexander的博客
02-23 1173
第0章 计算机概论 截止本次答案写作时间2019.2.23，www.top500.org上排名第一的超算为Summit，所有数据以此时此刻的数据为准。（1）系统名称：IBM Power System AC922 （2）USA （3）IBM POWER9 22C 3.07GHz （4）149864 （5）根据中国工业用电0.86到1.80元一度电，取1.00元一度电，计算该超算全功率运算一天的可能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值