CSS属性

最新推荐文章于 2024-07-06 14:50:23 发布
最新推荐文章于 2024-07-06 14:50:23 发布
阅读量72 收藏
点赞数
文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_59933216/article/details/128521964
版权

目录

CSS背景属性

backgroun-color

 background-image

background-position

 background-size

background-repeat

backgroun-origin

background-clip

background-attachment

CSS边框属性

border-width

 border-style

border-color

border-radius

box-shadow 给元素添加阴影

CSS轮廓属性

outline-color 

outline-style

outline-width

CSS背景属性

CSS提供background属性改变背景

语法：background:bg-color bg-image bg-position bg-size bg-repeat bg-origin bg-clip bg-attachment

每隔属性也可以单独设置，解释如下：

backgroun-color

作用：设置背景颜色

属性值描述

color

指定背景颜色
transparent指定背景是透明的
inherit指定继承父级的背景颜色

 background-image

作用：设置背景图片

属性值描述
url指定背景图片的地址
none让背景图片不显示
inherit指定继承父级的背景图片

background-position

作用：设置背景图像的位置

属性值描述
value1 value2value1指定背景图片的水平位置，value2指定背景图片的垂直位置，如果只填写一个值，则另一个值默认居中。填写方法1（value1：left、right、center；value2：top、bottom、center）填写方法2（value1：n%；value2：n%）填写方式3（value1：npos；value2：npos）。方法2和方法3可以混用。
inherit指定继承父级的属性值

 background-size

作用：设置背景图片的大小

属性值描述
value1 value2value1设置图片高度，value设置图片宽度
cover保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小
contain保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小

background-repeat

作用：设置背景图像是否重复 

属性值描述
repeat水平和垂直方向都重复（background属性的默认值）
repeat-x只水平方向重复
repeat-y只垂直方向重复
no-repeat任何方向都不重复
inherit继承父级的属性值

backgroun-origin

作用：指定backgroun-position的相对位置

属性值描述
padding-box相对于填充框
border-box相对于边界框
content-box相对于内容框

background-clip

作用：指定背景占有的位置 

属性值描述
border-box占有边界框（默认值）
padding-box占有填充框
content-box占有内容框

background-attachment

作用：指定背景图片固定还是随页面滚动

属性值描述
scroll随页面滚动（默认值）
fixed固定
local随元素滚动
inherit继承父级的属性值

CSS边框属性

CSS提供border属性改变边框

语法：border：border-width border-style border-color

 注意：border可用border-top、border-bottom、border-left、border-right单独改变一个方向的边框

border-width

作用：改变边框的粗细

属性值描述
medium定义中等边框（默认值）
thin定义细边框
thick定义粗边框
length(100px)自定义边框
inherit继承父级的属性值

 border-style

作用：改变边框的样式

属性值描述
none定义无边框
solid定义实线边框
dotted定义点线边框
dashed定义虚线边框
double定义双线边框
groove定义3D凹槽边框
ridge定义3D垄状边框
inset定义3Dinset边框
outset定义3Doutset边框
inherit继承父级的属性值

border-color

作用：改变边框的颜色

属性值描述
color（pink）定义边框的颜色
transparent定义边框是透明的（默认）
inherit继承父级的属性值

border-radius

作用：给边框添加圆角 

可设置四个值(像素或百分比)，分别代表左上、右上、左下、右下

box-shadow 给元素添加阴影

语法：box-shadow: h-shadow v-shadow blur spread color inset;

值描述
h-shadow必须，定义水平方向阴影的位置，可以是负值
v-shadow必须，定义垂直方向阴影的位置，可以是负值
blur定义模糊距离
spread定义阴影大小
color定义阴影颜色
inset定义阴影由外到内

CSS轮廓属性

CSS提供outline属性改变轮廓（轮廓内的内容包含border）

语法：outline：outline-color outlinee-style outline-width

outline-color 

默认属性invert：反转颜色

除transparent外，其余属性值与border-color相同。

outline-style

属性值与border-style相同

outline-width

属性值与border-width相同

百毒不侵_580
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Jquery删除css属性的简单方法
10-20
下面小编就为大家带来一篇Jquery删除css属性的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS属性大全
热门推荐
ss810540895的博客
07-21 2万+
css属性代码大全。
CSS属性汇总
m0_61108344的博客
02-19 5544
一：CSS选择器 标签选择器： 标签 { } 类选择器： class=" 类名 " .类名 { } id选择器： id="id名" #id名 { } 通配符选择器： * { } 后代选择器： 父标签 (子标签) 子标签的子标签 { } 子元素选择器： 父标签>子标签 >子标签的子标签 { } 并集选择器： 标签1，标签2{ } 链接伪类选择器： a：link(选择所有未被访问过的链接) ...
css 属性 inset
qq_40147756的博客
07-24 5219
实用简写属性 inset
CSS 属性书写顺序
m0_52861684的博客
09-01 1417
CSS 属性也是要有书写顺序的。
CSS属性： 过渡效果属性transition
08-04 3117
当我给一个盒子定义了100px的宽度时 当我点击 或则鼠标停留在盒子上时，盒子的宽度设置为300px, 如果没有设置过度 瞬间就300px了；
JS DOM之操作CSS属性
大河之犬的博客
10-06 2389
使用style对象来设置一个CSS属性的值，其实就是在元素的style属性中添加样式，这种方式设置的是“行内样式”需要注意的是，这里的属性名使用的是“骆驼峰型”的CSS属性名。在JavaScript中，我们可以使用cssText属性来同时设置多个CSS属性。在JavaScript中，想要设置一个CSS属性的值，有两种方式可以实现。obj表示DOM对象，attr表示CSS属性名，采用的同样是“骆驼峰”型。语法：obj表示DOM对象，cssText的值是一个字符串。应该写成borderBottomWidth。
Js 设置css属性
挂件
09-18 6136
用JS来动态设置CSS样式(设置成行内样式)，常见的有以下几种 1. 直接设置style的属性 某些情况用这个设置 !important值无效 如果属性有'-'号，就写成驼峰的形式（如textAlign） 如果想保留 - 号，就中括号的形式 element.style['text-align'] = '100px'; element.style.height = '100px'...
css常用属性
weixin_44992737的博客
06-11 3358
css属性，css字体属性，css背景属性，css表格属性，css列表属性，css文本属性，opacity属性
超级好用的css属性——clip-path
有事儿私信。
09-11 5647
clip-path是CSS3中的一个属性，用于在元素上创建一个裁剪区域，以显示元素的一部分。它允许您选择性地显示元素的某个部分，而隐藏其他部分。clip-path属性可以用于各种形状和图像，包括矩形、圆形、多边形和SVG图形等。
css背景属性
ssjjrr的博客
09-30 3326
css背景属性
CSS属性简写整理
09-25
在书写css过程中尽量简写css属性,有助于写出高效整洁的css,本文将常用的一一列出，需要的朋友可以参考下
简单但很实用的5个css属性
09-25
5个有用的css属性可能你是比较熟悉的，但是很少使用到它们。我这里讨论的不是css3的新属性。
javascript 获取特定的 CSS属性值
10-30
在JavaScript中，获取页面元素的CSS属性值通常是一个常见的需求。然而，当样式定义在外部CSS文件中时，直接使用`getElementById().style`属性可能无法获取到这些值，因为它们并不存储在DOM元素的内联样式中。在这种...
使用css做一个旋转的八卦图
weixin_40923558的博客
07-02 347
【代码】使用css做一个旋转的八卦图。
CSS 【详解】样式选择器（含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器）
最新发布
朝阳39的博客
07-06 687
idCSS 样式选择器，用于选中页面中的 html 元素，以便添加 CSS 样式。
Tailwind CSS是什么？
学以致用 知行合一
07-04 345
定义：Tailwind CSS是一个高度可定制的低级CSS实用程序类集合，用PostCSS编写，旨在通过JavaScript进行定制。它提供了一系列基础工具类，允许开发者通过组合这些工具类来快速构建页面和UI。起源：Tailwind CSS最初由Adam Wathan等人于2017年11月1日在GitHub上作为开源项目发布。随着时间的推移，它逐渐成长为一个成熟且流行的CSS框架。
使用css，让div消失在视野中的方法
博哥的二进制世界
07-03 292
使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。给元素设置visibility: hidden也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。visibility:hidden是视觉上消失了，在文档流中占位，浏览器会解析该元素；
css属性列表_和_属性值含义
09-17
CSS属性列表和属性值含义 在CSS（层叠样式表）中，属性列表和属性值的含义对于新手来说是一个重要的入门参考。CSS属性可以应用于各种媒体类型，如页面、屏幕、电子合成器等。特定的属性只能作用于特定的媒体，因此...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值