首页 > 其他分享 >CSS学习记录17

CSS学习记录17

时间：2024-12-19 20:56:21浏览次数：6  
标签：repeat 17 记录 背景 background 图像 border CSS 属性

CSS圆角

通过CSS border-radius 属性，可以实现任何元素的“圆角”样式。 CSS border-radius 属性用于定义元素角的半径。使用此属性可以为元素添加圆角。

#rcorners1 {
  border-radius: 25px;
  background: #73AD21;
  padding: 20px; 
  width: 200px;
  height: 150px; 
}

border-radius 属性是实际上是以下属性的简写属性：

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius

CSS border-radius-指定每个角

border-radius 属性可以接受一到四个值。规则如下：

四个值 - border-radius：15px 50px 30px 5px；（依次分别用于：左上角、右上角、右下角、左下角）；

三个值 - border-radius：15px 50px 30px；（第一个值用于左上角，第二个值用于右上角和左下角，第三个用于右下角）；

两个值 - border-radius: 15px 50px；（第一个值用于左上角和右下角，第二个值用于右上角和左下角）；

一个值 - border-radius: 15px; （该值用于所有四个角，圆角都是一样的）；

CSS边框图像

通过使用CSS border-image 属性，可以设置图像用作围绕元素的边框。

CSS border-image属性

CSS border-image属性允许您指定要使用的图像，而不是包围普通边框。

该属性有三部分：

  • 用作边框的图像
  • 在哪里裁切图像
  • 定义中间部分应重复还是拉伸

border-image 属性接受图像，并将其切成九部分。然后将拐角放置在拐角处，并根据您的设置重复或拉伸中间部分。

为了使border-image起作用，该元素还需设置border属性。

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 round;
}

 border-image属性实际上是以下属性的简写属性：

border-image-source规定用作边框的图像的路径。
border-image-slice规定如何裁切边框图像。
border-image-width规定边框图像的宽度。
border-image-outset规定边框图像区域超出边框盒的量。
border-image-repeat规定边框图像应重复、圆角、还是拉伸。

 border-image-slice属性

border-image-sliceCSS属性将引用的图像划分为多个区域。这些区域组成了一个元素的边框图像。

切分过程会将图像分割为9个区域：四个角、四个边以及中心区域。四条切片线，从它们各自的侧面设置给定距离，控制区域的大小。

  •  区域1-4为角区域。每一个都被用于组成最终边框图像的四个角。
  •  区域5-8为边区域。
  •  区域9为中心区域。它在默认情况下会被丢弃，但如果设置了关键字fill，则会将其用作元素的背景图像。

border-image-slice 属性可以用四个指定的<number-percentage>值来标识每一个图像切片的位置。负数是无效值，而大于其相应的最大尺寸的值则会被限制为100%。

  • 仅当指定了一个位置（1个值）时，创建的（上下左右）四个切片将具有相同的宽度/高度。
  • 当制定了两个位置（2个值）时，第一个值表示垂直方向的两个切片的高度（即top与bottom），第二个值表示水平方向两侧切片的宽度（即left 和 right)。
  • 当指定了3个位置（3个值）时，第一个值表示顶部切片的高度(即top），第二个值表示水平方向两侧切片的宽度（即left 和 right），第三个值则表示底部切片的高度（即bottom）。
  • 当指定了四个位置（4个值）时，这四个值分别对应top、right、bottom、left（上、右、下、左）四个切片的宽度/高度。

可选值fill可放在上面声明值的末尾。

取值

数字值

表示到图像边缘的偏移量，在位图中的单位为像素点，在矢量图中则是坐标。对于矢量图，数字值与元素大小相关，而非矢量图的元素大小。因此，使用矢量图时，使用百分比值更可取。

百分比

以原始图像大小的百分比表示边缘偏移量：水平偏移使用图像的宽度，垂直偏移则使用图像的高度。

border-image-repeat

定义图片如何填充边框。或为单个值，设置所有的边框；或为两个值，分别设置水平与垂直的边框。

值

stretch

        拉伸图片以填充边框。

repeat

        平铺图片以填充边框。

round

        平铺图像。当不能整数次平铺时，根据情况放大或缩小图像。

space

        平铺图像。当不能整数次平铺时，会用空白间隙填充在图像周围（不会放大或缩小图像）

CSS多重背景

CSS允许您通过background-image属性为一个元素添加多幅背景图像。不同的背景图像用逗号隔开，并且图像会彼此堆叠，其中的第一幅图像最靠近观看者。下面的例子有两幅背景图像，第一幅图像是花朵（与底部和右侧对齐），第二幅图像时纸张背景（与左上角对齐）。

#example1 {
  background-image: url(flower.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

多重背景图像可以使用单独的背景属性或background简写属性来指定。下面的例子使用background简写属性（结果与上例相同）：

#example1 {
  background: url(flower.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

CSS背景尺寸

CSS background-size 属性允许您指定背景图像的大小。可以通过长度、百分比或使用以下两个关键字之一来指定背景图像的大小：contain 或 cover。

#div1 {
  background: url(img_flower.jpg);
  background-size: 100px 80px;
  background-repeat: no-repeat;
}

contain关键字将背景图像缩放为尽可能大的尺寸（但其宽度和高度都必须适合内容区域）。这样，取决于背景图像和背景定位区域的比例，可能存在一些未被背景图像覆盖的背景区域。

cover关键字会缩放背景图像，使得内容区域完全被背景图像覆盖（其宽度和高度均等于或超过内容区域）。这样背景图像的部分内容可能在背景定位区域不可见。

#div1 {
  background: url(img_flower.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}

#div2 {
  background: url(img_flower.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

 

定义多个背景图像的尺寸

在处理多重背景时，background-size属性还可以接收多个设置背景尺寸的值（使用逗号分隔的列表）。下例指定了三幅背景图像的尺寸。

#example1 {
  background: url(tree.png) left top no-repeat, url(flower.gif) right bottom no-repeat, 
  	url(paper.gif) left top repeat;
  background-size: 50px, 130px, auto;
}

全尺寸背景图像

如果希望网站上的背景图像始终覆盖整个浏览器窗口。同时具备如下要求：

1.用图像填充整个页面（无空白） 2.根据需要缩放图像 3.在页面上居中图像 4.不引发滚动条。

那么可以使用<html>元素（<html>元素始终至少是浏览器窗口的高度)。然后在其上设置固定且居中的背景。最后使用background-size属性调整其大小：

html {
  background: url(img_man.jpg) no-repeat center fixed; 
  background-size: cover;
}

 

CSS background-origin属性

CSS background-origin属性指定背景图像的位置。

该属性接受三个不同的值：

  • border-box - 背景图片从边框的坐上角开始
  • padding-box - 背景图像从内边距边缘的左上角开始（默认）
  • content-box - 背景图片从内容的左上角开始
#example1 {
  border: 10px solid black;
  padding: 35px;
  background: url(flower.gif);
  background-repeat: no-repeat;
  background-origin: content-box;
}

CSS background-clip属性

CSS background-clip属性指定背景的绘制区域。

该属性接受三个不同的值：

  • border-box - 背景绘制到边框的外部边缘（默认）
  • padding-box - 背景绘制到内边距的外边缘
  • content-box - 在内容框中绘制背景
#example1 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
  background-clip: content-box;
}

background-origin 同background-clip的区别：

 background-origin决定的是背景起始的位置，而background-clip决定的是背景的绘制区域。因此，前者确定背景图像或颜色的起点，而后者明确了看到和应用它的区域。

可以很明显的看到花朵的左上角被裁剪一部分，因为background-clip规定了背景图像的区域，背景图的位置默认是以内边距开始，于是超出内容区域的部分被裁剪了。

属性描述
background用于在一条声明中设置所有背景属性的简写属性。
background-clip规定背景的绘制区域。
background-image为一个元素指定一幅或多幅背景图像。
background-origin规定背景图像的放置位置。
background-size规定背景图像的大小。

 

标签：repeat,17,记录,背景,background,图像,border,CSS,属性
From： https://blog.csdn.net/cwtlw/article/details/144574176

相关文章

  • 记录一下：小华半导体HC32F448建立MDK工程
    1.先到官网上下载文件a>下载驱动库：HC32F448_DDL_Rev1.1.0.zip驱动库中是包括了例程的。b>下载样例：HC32F448_Template_Rev1.0.1.zip可以直接复制官方的样例，就不用自己创建工程了。c>下载芯片支持包：HC32F448_IDE_Rev1.0.1.zip下载后双击安装即可。否则KEIL中找到不芯片。2.......
  • 多个好看的css动态特效按钮效果代码
    下面这些CSS按钮特效代码因其独特的设计和交互性，适用于多个现代数字界面和用户体验领域。概括而言，开发者可以将这段代码应用于以下领域：网页设计与开发：在构建网站时，这些按钮可以用于导航栏、表单提交、购物车结账等关键位置，吸引用户点击并提升整体视觉效果。移动应用界面：对于移......
  • 学习Web全栈体系记录
    这些概念涉及JavaScript中的核心编程思想与设计模式，下面我会详细解释每个重点和应用，并给出实际的代码示例和应用场景。1.高阶函数与函数抽象重点：JavaScript的原始类型和引用类型：原始类型（PrimitiveTypes）：包括string,number,boolean,undefined,null,symbol和bigint......
  • openGauss 安装记录 lite 版本
    exportLANG=zh_CN.UTF-8#创建用户useraddpostgrespasswdpostgres#12345678mkdir/opt/guassdbtar-zxvfopenGauss-Lite-5.0.2-CentOS-x86_64.tar.gz-C./guassdb/chown-Rguass:guass/opt/guassdbvim/etc/selinux/configSELINUX=disabledsetenforce0......
  • 【nginx】nginx dns缓存踩坑记录
    项目背景世界是个巨大的草台班子。这周突然在某个群里看到有个接口URL不通了。人在工位坐，锅从天上来。登录服务器进行排查：接口通过nginx，直接正向代理到外部系统某个域名。这样配置的原因是业务区域不通公网，在隔离区部署的nginx上开正向代理，从而调通公网。登录服务器，......
  • 17盒子模型练习-设置背景-附加背景图片
    一、元素的水平居中方案这个是在开发中比较常见的功能，就是元素的水平居中，需要元素在父元素中水平居中显示，父元素一般都是块级元素，inline-block如果想要居中目前我们学习了两种方案：行内级元素（包括inline-block元素）水平居中：在父元素中设置text-align:center块级元素水平居中：ma......
  • 12.19 CW 模拟赛 赛时记录
    前言考试的时候只需要管考试的策略就行了,其他的想他干嘛看题一般来说,涨信心模拟赛都不会涨信心像一位故人出的题?\(\rm{T1}\)相信自己,冲一下\(\rm{T2}\)看不懂\(\rm{T3}\)博弈\(\rm{T4}\)困难\(\rm{T1}\)机房两青轴是真的蚌埠思路转化题意,对于\(N\)条线......
  • 【2024-2017】Adobe图像处理软件 Photoshop（常简称为PS）下载安装
    AdobePhotoshop软件简介AdobePhotoshop（常简称为PS）是由Adobe公司开发的一款图像处理软件。自1988年首次发布以来，Photoshop以其强大的图像编辑功能和用户友好的界面而受到全球设计师、摄影师以及艺术家的喜爱。它广泛应用于摄影后期处理、数字绘画、图形设计、网页设计以及动......
  • 如何在易优CMS中实现每3条广告记录后输出一个<hr />标签？
    在易优CMS中，如果你想在每3条广告记录后输出一个<hr/>标签，可以使用mod属性来实现。mod属性允许你在每隔N行记录后输出指定的内容。以下是一个具体的示例：{eyou:advpid='1'loop='9'mod='3'}<ahref="{$field.links}"><imgalt="{$field.title}"src=......
  • C#使用log4net和sqlite数据库记录日志
    1安装包两个包：log4netSystem.Data.SQLite第二个包也可以使用Microsoft.Data.Sqlite，查到的资料显示如果环境使用的是.NETCore或.NET5+，则建议使用Microsoft.Data.Sqlite。但是我并没有测试第二个包，可能使用上有区别。2下载Sqlite如果本地没有sqlite环境的话，需要先下......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99