css3 背景相关的新增属性

最新推荐文章于 2024-10-04 20:18:28 发布
最新推荐文章于 2024-10-04 20:18:28 发布
阅读量280 收藏
点赞数
分类专栏： css 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/github_35549695/article/details/52453616
版权 
先上代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3</title>
    <style>
        div{
            background-color: black;
            border:dashed 15px green;
            padding:30px;
            color:white;
            font-size: 30px;
            font-weight: bold;
            margin-top: 10px;
            /*background-image: url("img.png");*/
            /*background-repeat: no-repeat;*/
        }
        .div1{
            background-clip: border-box;
            /*background-origin: border-box;*/
        }
        .div2{
            background-clip: padding-box;
            /*background-origin: padding-box;*/
        }
        .div3{
            background-clip: content-box;
            /*background-origin: content-box;*/
        }

    </style>
</head>
<body>
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</body>
</html>
 

这里面用了background-clip属性，border-box:包括边框在内；padding-box:包括padding在内，不包括边框；content-box:只包含了content内容，border和padding都不包括。
 

background-origin是搭配背景图片使用的，它的使用方式和方法与background-clip相似。

                

        

        

    

  


    

      

        

            

              
                
                  github_turboemily
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
详解CSS3新增的背景属性

				
			

			

				

					11-21
				

			

		

		

			
				
在CSS3中，为了增强网页设计的灵活性和表现力，新增了一些背景属性，这些属性让开发者能够更加精细地控制背景的显示方式。本篇文章将详细探讨CSS3中的三个新背景属性：`background-clip`、`background-origin`以及`...

			
		

	



                

              
                



	

		

			

				
					
css3新增属性（背景）

				
			

			

				

					PAN_lu的博客
				

				

					09-10
					
					373
					
				

			

		

		

			
				
1、背景色（纯色）

1.RGB 颜色

background-color:rgb(255,0,0)

2.RGBA 颜色

background-color:rgb(255,0,0，.3)

3.十六进制颜色



background-color:##RRGGBB,
其中的 RR（红色）、GG（绿色）、BB（蓝色）十六进制整数规定了颜色的成分

2.背景色（渐变）

1.线性渐变（Linear...

			
		

	



                


  
              

                


	

		

			

				
					
css3中background新增的4个新的相关属性用法介绍

				
			

			

				

					12-13
				

			

		

		

			
				
关于background属性用法，相信许多重构人员都很熟悉了，在css3中，background属性依然保持以前的用法，不过可以允许在该属性中添加多个背景图像组，背景图像之间通过逗号进行分隔。增加了4个新的相关属性。  ...

			
		

	





	

		

			

				
					
CSS3 Backgrounds属性相关介绍

				
			

			

				

					12-11
				

			

		

		

			
				
然而，随着CSS3的引入，为了提供更丰富的背景控制，新增了3个背景相关的属性以及更多的属性值。  首先，理解CSS中的“三个盒子”概念至关重要。这涉及到元素的布局模型，包括`content-box`、`padding-box`和`border-...

			
		

	



		

			
		



	

		

			

				
					
CSS3练习--电商web

				
			

			

				

					金灰的博客
				

				

					10-04
					
					634
					
				

			

		

		

			
				
免责声明：本文仅做分享！SEO、Favicon、小兔鲜儿。

			
		

	





	

		

			

				
					
后端向页面传数据（内容管理系统）

				
			

			

				

					m0_75163045的博客
				

				

					10-04
					
					386
					
				

			

		

		

			
				
首先，做一个登录页面。在这里，注意内容框里的提示信息用登陆成功之后是内容管理系统页面。

			
		

	





	

		

			

				
					
【H2O2|全栈】关于CSS（9）CSS3扩充了哪些新鲜的东西？（二）

				
			

			

				

					过期的H2O2的博客
				

				

					09-29
					
					998
					
				

			

		

		

			
				
本系列博客主要介绍CSS相关的知识点。本期补充部分伪元素、加入文本溢出属性和转换效果。没有基础的朋友，最好不要从这里开始看，否则有些地方可能会看不明白哦~

			
		

	





	

		

			

				
					
CSS3渐变

				
			

			

				

					weixin_74261199的博客
				

				

					10-02
					
					253
					
				

			

		

		

			
				
② 设置一个从左上角到右下角的粉色到紫色的渐变背景。① 设置一个从上到下的粉色向红色的渐变背景。的形状，默认值为ellipse。（左上角->右下角）等。（向45度方向渐变）等。设置一个圆形的径向渐变。

			
		

	





	

		

			

				
					
【CSS3】css开篇基础（1）

				
			

			

				

					Easonmax的博客
				

				

					10-02
					
					1098
					
				

			

		

		

			
				
我们可以给 body指定整个页面文字的大小，当然这对标题的字体大小是没影响的，它优先级高于body的字体大小优先级，必须指定对 h标签 进行修改才会有所改变。）在大多数情况下是没有功能上的区别的，它们都可以用来表示字符串， 无论是在 HTML 属性、CSS 样式或 JavaScript 中，使用单引号和双引号的效果基本相同。当然我们不用管用哪种形式，在vscode中我们能自己选颜色，比较便捷，如下图，所以无需太在意。这是一段文字，我们只要算好上面一行文字的底部到下面一行文字的底部的距离，那就是行间距。

			
		

	





	

		

			

				
					
css3-----2D转换、动画

				
			

			

				

					m0_73882020的博客
				

				

					10-01
					
					575
					
				

			

		

		

			
				
 转换transform 我们简单理解就是变形 有2D 和 3D 之分 我们暂且学了三个 分别是 位移 旋转 和 缩放 2D 移动 translate(x, y) 最大的优势是不影响其他盒子， 里面参数用%，是相对于自身宽度和高度来计算的 可以分开写比如 translateX(x) 和 translateY(y) 2D 旋转 rotate(度数) 可以实现旋转元素 度数的单位是deg 2D 缩放 sacle(x,y) 里面参数是数字 不跟单位 可以是小数 最大的优势 不影响其他盒子。

			
		

	





	

		

			

				
					
【H2O2|全栈】关于CSS（10）CSS3扩充了哪些新鲜的东西？（三）

				
			

			

				

					过期的H2O2的博客
				

				

					09-30
					
					945
					
				

			

		

		

			
				
本系列博客主要介绍CSS有关知识点，当前章节讲述CSS3相关内容。本期主要内容为CSS3的过渡属性和帧动画。部分内容仅代表个人观点，仅供参考，希望能帮助到您。

			
		

	





	

		

			

				
					
好玩的水表电表

				
			

			

				

					lulei5153的博客
				

				

					10-01
					
					1280
					
				

			

		

		

			
				
【代码】好玩的水表电表。

			
		

	





	

		

			

				
					
CSS3 字体

				
			

			

				

					wjs2024的博客
				

				

					09-28
					
					785
					
				

			

		

		

			
				
CSS3字体是网页设计和开发中的一个重要方面，它可以帮助设计师创建更具吸引力和可读性的网页。通过掌握CSS3字体的基本概念、特性、使用方法和最佳实践，设计师可以更有效地控制网页中的文字样式，提高用户体验。

			
		

	





	

		

			

				
					
html5 + css3（上）

				
			

			

				

					2301_76979886的博客
				

				

					09-28
					
					2117
					
				

			

		

		

			
				
英文状态!→回车（或者tab键），快速生成骨架，标签名说明dl表示自定义列表的整体，用于包裹dt/dd标签dt表示自定义列表的主题dd表示自定义列表的针对主题的每一项内容dd前会默认显示缩进效果⭕️dl标签中只允许包含dt/dd标签⭕️li标签可以包含任意内容。

			
		

	





	

		

			

				
					
基于MATLAB的肤色的人数统计系统，以地铁车厢为实际背景，通过预测的方式，结合肤色统计人脸得到车厢人数，从而估计拥挤度

					
最新发布

				
			

			

				

					10-04
				

			

		

		

			
				
【作品名称】：基于MATLAB的肤色的人数统计系统，以地铁车厢为实际背景，通过预测的方式，结合肤色统计人脸得到车厢人数，从而估计拥挤度

【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。

【项目介绍】：该课题为基于MATLAB的肤色的人数统计系统，以地铁车厢为实际背景，通过预测的方式，结合肤色统计人脸得到车厢人数，从而估计拥挤度，将结果反馈给车站里的视频，让乘客得知每节车厢的拥挤程度，从而合理分配车厢乘客，避免资源浪费和拥挤，本设计带有一个GUI交互界面。是一个人数统计类课题，该课题可以应用于教室人数统计，十字路口行人统计等等方面。


【资源声明】：本资源作为“参考资料”而不是“定制需求”，代码只能作为参考，不能完全复制照搬。需要有一定的基础能够看懂代码，能够自行调试代码并解决报错，能够自行添加功能修改代码。

			
		

	





	

		

			

				
					
LabVIEW 入门教程：从零开始掌握图形化编程 

				
			

			

				

					10-04
				

			

		

		

			
				
亲爱的工程师和技术爱好者们，

您是否想学习一种强大的图形化编程语言，以便在自动化、数据采集、测试测量等领域大展身手？LabVIEW 是您的最佳选择！我们为您精心准备了一份全面的 LabVIEW 入门教程，帮助您从零开始，逐步掌握这门强大的工具。

 为什么选择 LabVIEW？

直观易学：图形化编程界面，无需编写复杂的代码。
广泛应用：适用于工业自动化、数据采集、仪器控制、图像处理等多个领域。
强大功能：内置丰富的函数库和工具包，满足各种复杂需求。
社区支持：庞大的用户社区和丰富的在线资源，助您解决各种问题。
本教程适合谁？

初学者：从未接触过 LabVIEW 的新手。
工程师：希望提升技能，提高工作效率的专业人士。
学生：对自动化和测试测量感兴趣的在校学生。
研究人员：需要进行数据采集和分析的研究人员。
 课程内容

LabVIEW 基础：安装与配置、界面介绍、基本概念。
图形化编程：创建 VI（虚拟仪器）、使用控件和指示器。
数据流编程：理解数据流的概念，编写简单的程序。
常用函数库：了解并使用常用

			
		

	





	

		

			

				
					
吉林农业科技学院在辽宁2020-2024各专业最低录取分数及位次表.pdf

				
			

			

				

					10-04
				

			

		

		

			
				
那些年，与你同分同位次的同学都去了哪里？全国各大学在辽宁2020-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据

			
		

	





	

		

			

				
					
离网下三相不平衡负载，基于下垂控制的T型三电平逆变器，采用正负序分离四环控制，正序电压电流双闭环，负序电压电流双闭环，中点电位平

				
			

			

				

					10-04
				

			

		

		

			
				
离网下三相不平衡负载，基于下垂控制的T型三电平逆变器，采用正负序分离四环控制，正序电压电流双闭环，负序电压电流双闭环，中点电位平衡控制，采用SPWM调制。
1.提供下垂控制原理,参数计算方法以及相关文献
2.电压电流双闭环控制
3.正负序分离控制以及相关资料
支持simulink2022以下版本（默认发2016b）。



			
		

	





	

		

			

				
					
微信小程序-新闻阅读器_ echatapp新闻阅读器.zip

				
			

			

				

					10-04
				

			

		

		

			
				
微信小程序-新闻阅读器_ echatapp新闻阅读器

			
		

	





	

		

			

				
					
"CSS3新增背景属性与值，解密背景盒模型

				
			

			

				

					
				

			

		

		

			
				
CSS3 Backgrounds属性相关介绍  在CSS2.1中，有5个background属性可以用来控制元素的背景。这5个属性分别是：background-color、background-image、background-repeat、background-attachment和background-position...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值