news 2026/8/20 10:30:06

课程笔记4

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
课程笔记4

一、新增背景属性

1.opacity不透明度

说明:给元素添加透明效果,填0~1的数字,0是完全透明,1是完全透明。

注意:opacity是给元素设置透明度,rgba是给颜色设置透明度。

2.background—origin背景图原点

(1).padding-box:从padding区域开始显示背景图像。(默认)

(2).border-box:从border区域开始显示背景。

(3).content-box:从content区域开始显示背景。

3.background-clip背景图向外裁剪的区域

(1).padding-box:从padding区域开始向外裁剪背景。

(2).border-box:从border区域开始向外裁剪背景。(默认)

(3).content-box:从content区域开始向外裁剪背景。

(4).text:背景图只呈现文字。

注意:值为text时要加上-webkit-前缀。

4.background-size背景图尺寸

方法:

(1)用长度值调整大小,不能用负值。

(2)用百分比调整大小,不能用负值。

(3)auto:原本尺寸。(默认)

(4)contain:把背景图等比放缩到与容器宽高相同,把全部图片放到容器里,可能会造成容器部分没有图片。

(5)cover:把背景图等比放缩到完全覆盖容器,,但图片可能显示不完全。(相对推荐)

5.background复合属性

background:cover url repeat position / size origion clip

注意:origin和clip的值一样时只写一个,不同时按上面顺序写。

position和size必须用 / 分开,且顺序不能改变。

6.多背景图

backg:url(.........)no-repeat,

url(.........)no-repeat right top,

url(.........)no-repeat left bottom,

url(.........)no-repeat right bottom;

二、新增边框属性

1.border-radius边框圆角

同时设置四个角的圆角:border-radius:10px;

分开设置时应把上下左右写在中间并用连字连接。

例:border-top-left-radius左上角。

注意:要先写上下,再写左右;

写一个值是正圆半径,两个值是椭圆的x半径和y半径。

综合写法:border-radius:左上x 右上x 右下x 左下x / 左上y 右上y 右下y 左下y

2.外边框轮廓(了解)

(1)outline-width:外轮廓宽度

(2)outline-color外轮廓颜色

(3)outline-style外轮廓风格

none:无轮廓;dotted:点状轮廓;dashed:虚线轮廓;solid:实线轮廓;double:双轮廓。

(4)outline-offset外轮廓与边框距离(正负均可)

(5)复合属性:outline:50px solid blue;

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/8/20 10:30:03

世界模型智能体对抗攻击自动化评估框架WMAttack解析

1. 项目概述:当世界模型遇上对抗攻击最近在跟进强化学习和智能体安全领域的研究,一个绕不开的话题就是“对抗鲁棒性”。我们训练出的智能体在模拟环境中表现优异,但一旦环境出现一些微小的、人类甚至难以察觉的扰动,它的决策就可能…

作者头像 李华
网站建设 2026/8/20 10:29:47

DSH桌面端实战:基于MCP协议与Skills生态构建安全AI开发助手

如果你是一名开发者,最近可能已经感受到了一个明显的趋势:AI 正在从“聊天机器人”加速演变为能直接操作你电脑、调用你本地工具、帮你完成具体任务的“数字同事”。但随之而来的问题是,如何让这些AI助手安全、可控地接入你的开发环境&#x…

作者头像 李华
网站建设 2026/8/20 10:27:37

ShieldFont:利用动态字体混淆技术防御AI爬虫的数据抓取

你的网站内容是否正在被各种AI爬虫悄无声息地“吞噬”?你是否发现,明明在robots.txt中明确禁止了某些爬虫,但它们依然我行我素,肆无忌惮地抓取你的数据用于训练大模型?如果你是一名站长、内容创作者或开发者&#xff0…

作者头像 李华
网站建设 2026/8/20 10:27:11

茜茜的计算器【牛客tracker 每日一题】

茜茜的计算器 时间限制:1 秒 空间限制:256 MB 网页链接 牛客tracker 牛客tracker & 每日一题,完成每日打卡,即可获得牛币。获得相应数量的牛币,能在【牛币兑换中心】,换取相应奖品!助力每…

作者头像 李华
网站建设 2026/8/20 10:26:01

Windows系统文件uwfservicingapi.dll丢失找不到问题解决

在使用电脑系统时经常会出现丢失找不到某些文件的情况,由于很多常用软件都是采用 Microsoft Visual Studio 编写的,所以这类软件的运行需要依赖微软Visual C运行库,比如像 QQ、迅雷、Adobe 软件等等,如果没有安装VC运行库或者安装…

作者头像 李华