css边框

最新推荐文章于 2023-02-26 00:38:26 发布
最新推荐文章于 2023-02-26 00:38:26 发布
阅读量189 收藏
点赞数 1
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42591732/article/details/95592062
版权 
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			font {
				font-size: 120px;
				text-align: center;
				color: yellow;
				background: repeat;
				background-color: aquamarine;
			}
			
			.a {
				font-size: 50px;
			}
			/*id选择器*/
			
			#id1 {
				color: blue;
			}
			
			#id2 {
				color: red;
			}
			
			#id3 {
				color: pink;
			}
			/*边框
			 
			 * 1像素
			 * 2线的类型
			 * 3边框的颜色
			 * */
			
			div {
				border: 1px solid red;
				/*width: 200px;*/
				height: 100px;
				width: 30%;
				background-color: pink;
				background-image: url(../img/2ad0eff7ab2ce6eb0143eb7757948ab2.jpg);
				color: yellow;
			}
		</style>
	</head>

	<body>
		<font>变态！</font>
		<font id="id3">王正宇你好骚哦</font>
		<div>
			哈哈哈哈
		</div>
		<div>垃圾</div>
	</body>

</html>

在这里插入图片描述

海底钓鱼
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS外联模式
成长日记的博客
06-04 5424
外联模式与内联模式相比将内容与表现分离，但是style中的内容是将css的内容插入到html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in...
CSS 边框
01-19
CSS边框属性允许你指定一个元素边框的样式和颜色。 在四边都有边框   红色底部边框   圆角边框   左侧边框带宽度，颜色为蓝色 边框样式 边框样式属性指定要显示什么样的边界。 border-style属性用来定义边框的...
CSS：CSS的外联样式
Thumb_的博客
12-09 5500
样式一： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS外联样式一</title> <style> /* 对body中的所有p元素起作用 */ p { color:blue; font:bolder; }
CSS外部样式示例
ztt0918的博客
04-14 3075
html> html lang="en"> head> meta charset="UTF-8"> link rel="stylesheet" href="../css/01.css"/> title>title> head> body> ：外部样式 推荐写法 样式可以复用，做到了样式和文件分离-->：01.css--> p> 电脑span id="price"
CSS的三种链接方式（内联式、嵌入式、外部式）
m0_62200674的博客
07-08 1万+
内联式、嵌入式、外部式CSS，优先级遵循就近原则
【CSS】CSS 层叠样式表 ③ ( CSS 引入方式 - 外链式 | CSS 样式规则 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
02-26 4411
一、CSS 引入方式 - 外链式 1、外链式 CSS 语法 2、CSS 代码 3、HTML 代码 二、CSS 样式规则
巧用CSS边框 制作技能冷却效果
09-25
在本文中，我们将深入探讨如何利用CSS边框来制作技能冷却效果，这是一种创新的方法，可以避免使用Flash等更复杂的工具。 首先，让我们回顾一下CSS边框的基本概念。边框是围绕元素的矩形线条，可以通过`border-width...
探究CSS边框特效实现技巧
09-24
半透明的边框如何实现？多重边框如何实现？这篇文章就是主要针对CSS边框特效实现技巧进行探究，感兴趣的小伙伴们可以参考一下
Css边框练习源码Css边框练习源码
02-28
Css边框练习源码
CSS 边框.docx
02-27
CSS边框是网页设计中不可或缺的一部分，它允许开发者精确控制元素的外观，使其更具吸引力和功能性。CSS（层叠样式表）提供了丰富的边框属性，包括边框的宽度、样式和颜色，使得边框不再局限于HTML表格，而是可以应用...
CSS 内联样式 外联样式 嵌套样式
热门推荐
07-07 5万+
CSS 内联样式 外联样式 嵌套样式 内联样式 <p style="color: pink;"></p> 外联样式 <link href="CSS文件" rel="stylesheet" type="text/css"></link> 嵌套样式 在HTML界面<head>里面写CSS代码 <style type="text/css...
CSS
qq_39134392的博客
05-24 655
概念：层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。CSS为HT...
【web前端(五)】html_外联样式
LED_of_Java的博客
08-05 1458
我们在样式选择器的基础上，可以将其保存起来，创建一个样式文件。 然后，下面有两种可以引用样式文件的方法，来更改我们的样式属性。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>行外样式（外联样式）</title> <!-...
外联css及js的使用
weixin_34191845的博客
03-13 301
结构图如下： html如下： <!DOCTYPE html> <html> <head> <title>button test</title> <link rel="stylesheet" type="text/css" href="css/1.css"> </head> &lt...
css样式内联式，外联式，嵌入式
BestQiang的博客
04-05 2万+
1.外联式样式（属于外部样式表） 特征： 1、有一个单独的CSS文件存在！[如：001.css] 2、首先，通过【格式】→【样式表连接】与CSS文件[001.css]建立连接！ 3、在合适的地方使用 class=“样式名” 调用具体的样式效果！ 如： 2.嵌入式样式（属于内部样式表） 特征： 1、样式的属性内容以代码的形式[放在 ]写在网页代码中！ 2、首先，通过【格式】→【样式】设置样式的属性内...
学习笔记（ 4 ） - CSS外联样式
烟溪彭于晏的博客
04-23 118
然后百度得知作为外联引用的jsp只需要写style里面的内容就行。
css之边框
Faith的博客
08-18 333
边框可以应用到在主体元素body中的绝大部分HTML元素中。 创建一个包围着元素的边框，你所需要的是边框样式border-style。它们的值可以是 solid、dotted、dashed、double、groove、ridge、 inset和outset。（你有必要每个值都试一试，看看效果如何——译者注） 边框宽度border-width为边框设置宽度，通常用像素来表示。当然，还可
外联式css怎么写_如何链接外部CSS样式表
weixin_39722070的博客
12-20 3510
展开全部链接外部样式文件外部引入CSS样式文件是通过link标签实现的，它只能位于HTML文档的head标签内，且必须有href属性，该属性用于指定62616964757a686964616fe4b893e5b19e31333431373331需要引入的CSS文件的路径。写法：link元素中type用于规定链接文档的MIME类型，rel属性用于规定被链接文档与当前文档之间的关系，如alternat...
css 边框彩虹变换
最新发布
09-01
要实现CSS边框的彩虹变换效果，可以使用背景渐变和动画属性来实现。首先，为目标元素添加一个边框，并将其设置为透明。然后，使用background-image属性添加一个渐变背景，并将背景色设置为彩虹颜色。接下来，使用动画属性让渐变颜色在一定的时间内循环播放。下面是一个实现边框彩虹变换效果的例子: ```html <div class="rainbow-border"></div> ``` ```css .rainbow-border { width: 200px; height: 200px; border: 5px solid transparent; background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); background-clip: padding-box; animation: rainbow 5s linear infinite; } @keyframes rainbow { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } ``` 上面的代码中，我们定义了一个名为"rainbow-border"的类，设置了宽度、高度和边框。然后，使用linear-gradient函数创建了一个从红色到紫色的渐变背景，并将其应用于背景图像。接下来，通过animation属性添加了一个名为"rainbow"的动画，设置了动画的持续时间、循环次数和缓动函数。动画的关键帧中，通过改变background-position属性的值来实现渐变颜色的循环播放效果。 这样，当你将"rainbow-border"类应用于一个元素时，它的边框就会呈现出彩虹变换的效果。这是一种简单而有效的方法来实现CSS边框的彩虹变换效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [有趣的CSS | css-border特效（转动边框，彩虹边框，渐变边框）和css变量](https://blog.csdn.net/qq_39370934/article/details/118439096)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值