CSS/CSS3常用Style

已于 2023-02-13 11:35:02 修改
阅读量1.1k 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： CSS + CSS3 文章标签： css
于 2016-03-01 17:09:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_16559905/article/details/50774060
本文介绍了多种CSS技巧，包括实现特定样式效果、文本处理、布局调整等，并提供了丰富的代码实例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1、实现以下功能：
这里写图片描述

代码附上：

width: 5px;
height: 35px;
border: 84px solid;
border-color: #ffa002 transparent transparent transparent;

2、如何实现“颜色渐变”这种功能效果图，如下图：

这里写图片描述
代码附上：

background: -webkit-linear-gradient(left, #67d41f 24%, #FFFFFF 1%,#FFFFFF 24.5%, #d2d2d2 1% ,#d2d2d2 50%,#FFFFFF 1%,#FFFFFF 50.8%,#D2D2D1 1%,#D2D2D1 75%,#ffffff 1%,#ffffff 75.6%,#d2d2d2 1%,#d2d2d2 99%);

3、在标题文字后面加图片

如图所示，在ul li 的末尾处加入向右的箭头
这里写图片描述

//只需在li标签上加入一个css即可：
background: #FFFFFF url(../../img/right-jia.png) center right 18px no-repeat;

4、改变背景颜色

（1）上下分开

background: linear-gradient(to bottom, #ffea78 0px, #FFFFFF 100%)repeat-x scroll 0 0 rgba(0, 0, 0, 0);

这里写图片描述

（2）左右分开

background:linear-gradient(to left, red 100px, yellow 200px);

这里写图片描述
（3）左上角渐变

background-image:linear-gradient(to left top, red 100px, yellow 200px);

这里写图片描述

5、文本过长，不换行用省略号显示

.ellipsis {/**文本过长，不换行用省略号显示*/
    overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     -o-text-overflow: ellipsis;
     -icab-text-overflow: ellipsis;
     -khtml-text-overflow: ellipsis;
     -moz-text-overflow: ellipsis;
     -webkit-text-overflow: ellipsis;
}

.ellipsis1 {/**多行文本过长，用省略号显示*/
	width: 200px;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ellipsis2 {/**多行文本过长，用省略号显示*/
	width: 200px;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;//显示的第几行加省略号
    -webkit-box-orient: vertical;
    overflow: hidden;
}

效果图附上：
这里写图片描述
demo 附上：

<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,height = device-height, initial-scale=0,maximum-scale = 2.0,minimum-scale = 1.0,user-scalable = no">
		<title>省略号</title>

		<style>
			.text1 {
				width: 200px;
				overflow: hidden;
				text-overflow: ellipsis;
				-o-text-overflow: ellipsis;
				-webkit-text-overflow: ellipsis;
				-moz-text-overflow: ellipsis;
				white-space: nowrap;
			}
			
			.text2 {
				width: 200px;
				word-break: break-all;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}
		</style>
	</head>

	<body>
		<div class="text1">热卖精选：从子频道（服饰鞋包，亲子，居家，美妆）档期里面挑选出来，库存大于30%的高信价比商品list，数量为50个</div>

		<br />

		<div class="text2">热卖精选：从子频道（服饰鞋包，亲子，居家，美妆）档期里面挑选出来，库存大于30%的高信价比商品list，数量为50个</div>
	</body>

</html>

6、两端对齐

text-align:justity;
text-justify:inter-ideogra;

7、文字换行

white-space:nowrap;/*强制不换行*/
word-wrap：normal;/*只在允许的断字点换行（浏览器保持默认处理）*/
word-wrap: break-word;/*在长单词或URL地址内部进行换行。*/
word-break: normal;/*强制英文单词断行*/
word-break:break-all;/*允许在单词内换行*/

8、禁用鼠标Style

cursor:not-allowed;

一、display : flex 布局

1、效果1

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,user-scalable=0">
		<title>布局</title>
		<style>
			body {margin: 0 auto;}
			
			.list {
				display: -webkit-flex;
				flex-flow: row wrap;
				-webkit-flex-flow: row wrap;
				align-items: stretch;
				-webkit-align-items: stretch;
				justify-content:center;
				-webkit-justify-content: center;
				/*
				 * flex-flow的参数介绍
				   row    ---横向（左向右）
				   column ---竖向（上向下）
				   wrap   ---一行显示不完的时候换行
				*/
			}
			.list div {
				margin: 5px 0px 0px 0px;
				width: 40%;
				height: 100px;
				line-height: 100px;
				text-align: center;
				border: 1px solid red;
			}
		</style>
	</head>

	<body>
		<div class="list">
			<div>AAA</div>
			<div>BBB</div>
			<div>CCC</div>
			<div>DDD</div>
		</div>
	</body>
</html>

这里写图片描述
2、效果2

.list {
	display: -webkit-flex;
	flex-flow: row;
	-webkit-flex-flow: row;
	align-items: stretch;
	-webkit-align-items: stretch;
	justify-content:center;
	-webkit-justify-content: center;
}

这里写图片描述


3、效果3

CSS flex 属性

让所有灵活的项目都带有相同的长度，忽略它们的内容。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,user-scalable=0">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>布局</title>
		<style>
			body{margin: 0 auto;}
			/*
				flex-flow: row wrap; row横向（左向右）显示 column竖向（上向下）显示 wrap一行显示不完的时候换行
			*/
			div{
				border: 1px solid red;
				height: 200px;
			}
			
			footer { 
				display: -webkit-flex;
				-webkit-flex-flow: row;
				-webkit-align-items: stretch;
				-webkit-justify-content:space-between;
				  
				/*IE10还不支持*/
				display: -ms-flex;
				-ms-flex-flow: row wrap;
				-ms-align-items: stretch;
				-ms-justify-content:space-between;
				
				display: flex;
				flex-flow: row;
				align-items: stretch;
				justify-content:space-between;
			}
			.col2{-webkit-flex:1;-moz-flex:1;flex:1}
		</style>
	</head>
	<body>
		<footer>
		    <div style="width:80px;">AAA</div>
		    <div class="col2">BBB</div>
		    <div style="width:40px;">CCC</div>
		</footer> 
	</body>
</html>

这里写图片描述

浏览器支持

除了 Safari，其他所有主流浏览器都支持 flex 属性。

IE 9 及其之前的版本不支持 flex 属性。IE 10 需要前缀 -ms- 才支持该属性。

详情请查阅W3C规范：http://www.runoob.com/cssref/css3-pr-flex.html


二、display : box 布局

实现代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" id="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<title></title>
		<style>
			body{margin:0 auto;text-align:center}
			.test_box{width:100%;background:#f0f3f9;margin:0 auto}

			.test_box .list{width:25%;/*字体：加粗、36px大小，高度80px*/font:700 26px/80px monaco;border:1px solid red}
			
			/*关键代码*/
			.one{display:-moz-box;display:-webkit-box;display:-o-box;display:box;-moz-box-pack:start;-webkit-box-pack:start;-o-box-pack:start;box-pack:start}
			.two{display:-moz-box;display:-webkit-box;display:-o-box;display:box;-moz-box-pack:end;-webkit-box-pack:end;-o-box-pack:end;box-pack:end}
			.three{display:-moz-box;display:-webkit-box;display:-o-box;display:box;-moz-box-pack:center;-webkit-box-pack:center;-o-box-pack:center;box-pack:center}
			.four{display:-moz-box;display:-webkit-box;display:-o-box;display:box;-moz-box-pack:justify;-webkit-box-pack:justify;-o-box-pack:justify;box-pack:justify}

		</style>
	</head>

	<body>
		<div class="test_box one">
			<div class="list">1</div>
			<div class="list">2</div>
			<div class="list">3</div>
		</div><br />
		<div class="test_box two">
			<div class="list">4</div>
			<div class="list">5</div>
			<div class="list">6</div>
		</div><br />
		<div class="test_box three">
			<div class="list">7</div>
			<div class="list">8</div>
			<div class="list">9</div>
		</div><br />
		<div class="test_box four">
			<div class="list">10</div>
			<div class="list">11</div>
			<div class="list">12</div>
		</div>
	</body>

</html>

如图所示的布局：
这里写图片描述


布局详细介绍，请移步：链接1、链接2


align-items（竖轴上的排列基准）

flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。

stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

详情请查阅：http://www.webkkl.com/style/align-items.php
http://www.css88.com/book/css/properties/flex/align-items.htm


示例1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,user-scalable=0">
		<title>布局</title>
		<style>
			body {
				margin: 0 auto;
				background: #E1EDF7;
			}
			.list div{
				width: 40%;
				height: 100px;
				border: 1px solid red;
				
				/*关键代码*/
				display: flex;
				display: -webkit-flex;
				align-items: center;
				-webkit-align-items: center;/*IOS专用*/
			}
		</style>
	</head>

	<body>
		<div class="list">
			<div><span>AAA</span></div>
			<div><span>BBB</span></div>
			<div><span>CCC</span></div>
			<div class="c5"><span>DDD</span></div>
		</div>
	</body>
</html>

这里写图片描述


示例2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,user-scalable=0">
		<title></title>
		<style>
			.box{
				display:-webkit-flex;
				display:flex;
				width:200px;height:100px;margin:0;padding:0;border-radius:5px;list-style:none;background-color:#eee;}
			.box li{margin:5px;border-radius:5px;background:#aaa;text-align:center;}
			.box li:nth-child(1){padding:10px;}
			.box li:nth-child(2){padding:15px 10px;}
			.box li:nth-child(3){padding:20px 10px;}
			
			#box{
				-webkit-align-items:flex-start;
				align-items:flex-start;
			}
			#box2{
				-webkit-align-items:flex-end;
				align-items:flex-end;
			}
			#box3{
				-webkit-align-items:center;
				align-items:center;
			}
			#box4{
				-webkit-align-items:baseline;
				align-items:baseline;
			}
			#box5{
				-webkit-align-items:strecth;
				align-items:strecth;
			}
		</style>
	</head>

	<body>
		<h2>align-items:flex-start</h2>
		<ul id="box" class="box">
			<li>a</li>
			<li>b</li>
			<li>c</li>
		</ul>
		<h2>align-items:flex-end</h2>
		<ul id="box2" class="box">
			<li>a</li>
			<li>b</li>
			<li>c</li>
		</ul>
		<h2>align-items:center</h2>
		<ul id="box3" class="box">
			<li>a</li>
			<li>b</li>
			<li>c</li>
		</ul>
		<h2>align-items:baseline</h2>
		<ul id="box4" class="box">
			<li>a</li>
			<li>b</li>
			<li>c</li>
		</ul>
		<h2>align-items:strecth</h2>
		<ul id="box5" class="box">
			<li>a</li>
			<li>b</li>
			<li>c</li>
		</ul>
	</body>

</html>

这里写图片描述

三、一行 CSS 代码实现整个网站网页变黑白灰的效果（悼念）

html.o2_gray {
    -webkit-filter:grayscale(100%);
    -moz-filter:grayscale(100%);
    -ms-filter:grayscale(100%);
    -o-filter:grayscale(100%);
    filter:grayscale(100%);
    -webkit-filter:gray;
    filter:gray;
    -webkit-filter:progid:dximagetransform.microsoft.basicimage(grayscale=1);
    filter:progid:dximagetransform.microsoft.basicimage(grayscale=1)
}

html.o2_gray img {
    -webkit-filter:url(//misc.360buyimg.com/mtd/pc/index_2019/1.0.1/fonts/18398cb27130fa104552f4ecd010cdc7.svg#grayscale)!important;
    filter:url(//misc.360buyimg.com/mtd/pc/index_2019/1.0.1/fonts/18398cb27130fa104552f4ecd010cdc7.svg#grayscale)!important
}

四、动画

效果：ChatGpt 光标闪烁效果：

<style>
   #app:after {
     content: " ";
     background-color: #249c61;
     letter-spacing: 0.88px;
     width: 10px;
     height: 26px;
     display: block;
     animation: cursor-blinks 1s infinite steps(1, start);
   }
   @keyframes cursor-blinks {
     0% {
       opacity: 1;
       display: block;
     }
     50% {
       opacity: 0;
       display: none;
     }
     100% {
       opacity: 1;
       display: block;
     }
   }
</style>

<body>
  <div id="app"></div>
</body>
IFRAME 元素 | iframe 对象
KM3945[BLOG]
10-09 1684
IFRAME 元素 | iframe 对象创建内嵌浮动框架。成员表下面的表格列出了 iframe 对象引出的成员。请单击左侧的标签来选择你想要查看的成员类型。标签属性/属性 显示: 标签属性/属性 行为 集合 事件 滤镜 方法 对象 样式 行为 描述 clientCaps 提供关于 Internet Explorer 支持的特性的信息，以及提供即用即装的方法。 download 下载文件并在下载完
CSS样式
m0_59708269的博客
01-19 2053
css(Cascading Style Sheets):层叠样式表 解决html写样式的弊端 特点:实现了样式和内容的分离 语法: 1.原本写在html标签中依然可以实现 <div style="color:red;">我是默认的方式</div> 2.写在head表中 <style> /* 语法 选择器{ 属性:值; 属性2:值2; ..... } */ p
CSS style属性大全
02-14
CSS style属性大全,使css使用起来不在一头雾水
css中style用法详解
hnas_better的专栏
11-23 2878
 css样式表按其所在位置分三种：1.内嵌样式表2.内部样式表3.外部样式表下面详细解释一下：1.内嵌样式表是写在使用它的标签(Tag)内的，例如要在标签中使用，其语法为：这段文字使用了内嵌样式表，更改了字体大小为20 2.内部样式表不同于内嵌样式表，其是写在html网页的标签之间的，所以它对本网页全部有效。应注意的是，因为它不是写在某一个标签内的，所以在写的时候要
CSS3 样式
kyl282889543的博客
02-01 395
CSS3样式1. CSS 样式表概要2. 常用CSS 样式2.1 字体属性：(font)2.2 背景属性： (background)2.3 区块属性： (Block)2.4 盒子属性： (Box)2.5 列表属性： (List-style)2.6 定位属性： (Position)2.7 CSS文字属性2.8 CSS边框空白2.9 CSS符号属性2.10 CSS背景样式2.11 CSS连接属性2...
前端常用文档资源(css/js/html)
11-23
**CSS（Cascading Style Sheets）** CSS负责控制网页的外观和布局。通过选择器（如类名、ID或元素类型）与HTML元素关联，定义样式属性，如颜色、字体、大小、布局等。CSS3带来了许多新特性，如媒体查询（实现响应式...
常用的css/div
04-03
在网页设计领域，CSS（Cascading Style Sheets）与HTML并驾齐驱，共同构建了网页的视觉表现。本文将围绕“常用的css/div”这一主题，深入探讨CSS的基础概念、重要性以及如何有效地利用div元素进行布局。 首先，CSS...
css常用代码大全(html+css代码).pdf
07-13
在“CSS常用代码大全(html+css代码).pdf”中，我们可以看到一系列常用的CSS代码及其用法。 首先，关于文本设置，`font-size`用于定义文本的字号，`font-style`可以设置文本的斜体，如`italic`或`normal`，`font-...
vue element 项目默认css文件 style
01-02
Vue.js和Element UI是开发Web应用的常用技术栈。Vue.js是一个轻量级的前端JavaScript框架，它提供了组件化、虚拟DOM、响应式数据绑定等特性，极大地提高了开发效率。而Element UI则是一套为开发者、设计师和产品经理...
css_tricks：一些CSS技巧，一些CSS常用样式
02-05
这个名为"css_tricks"的资源包显然是一系列关于CSS技巧和常用样式的集合，旨在帮助开发者提升他们的CSS技能。下面我们将深入探讨一些可能包含在该压缩包中的关键知识点。 1. **选择器的使用**： - **基础选择器**...
CSS-style的三种方式(内联、嵌入、外部)
热门推荐
qq_38345598的博客
01-27 3万+
一、内联式 一般都写在特定的标签元素里面来实现对元素的修改。例如将    人生应该奋斗不止的字体颜色设置为红色 人生应该奋斗不止 并且css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。如下代码： 这里文字是红色。二、嵌入式 嵌入式css样式必须写在之间，并且一般情况下嵌入式css样式写在之间。如下面的代码将文字设置为粉
CSS：样式
2301_79526467的博客
03-30 1699
1. 引入方式 　 方式一：行内式 　 方式二：内嵌式 　 方式三：外部引入 2. 选择器 　 选择器一：标签名定义选择器 　 选择器二：根据标签的id名定义选择器 　 选择器三：根据元素的属性值确定class的样式 3. 浮动、定位 4. 盒子模型
css标签
最新发布
chaobiaozhishui的博客
03-25 81
【代码】css标签。
css常用样式
Litt_White的博客
08-06 1698
css常用选择器，深度选择器，css常用样式，css 水平垂直居中，滚动，隐藏滚动条，flex布局
css：style样式
paradoxaaa_的博客
09-23 4241
css样式有文档内嵌样式（内联式）、外部引用样式（外联式）、元素内嵌样式（行内式）三种。 内联式：<style type="text/css"> #box { width: 600px; height: 500px; background: red; } </style> 外联式： <link re...
css3样式效果
Mybells
10-29 344
css3样式效果 werwe rwerwer List item 1.渐进颜色变化 <style> /* 渐进色 */ #linear{ height:50px; width:200px; background-image: linear-gradient(to right, rgba(255,0,0,1), rgba...
CSS---style(样式)
chen_zan_yu_的博客
12-16 656
&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;CSS&lt;/title&gt; &lt;!--也可以将css样式写到head中的style标签里 将样式表编写在style标签中，然后通过CSS选择器可以使样式进一步复用，
CSS3样式
weixin_48035827的博客
01-22 1451
目录 CSS概念 CSS基本语法 css引入方式 css的注释 CSS选择器 基本选择器 层次选择器 结构伪类选择器 属性选择器 美化网页元素 字体样式 文本样式 文本，阴影和超链接伪类 列表 背景 盒子模型 边框border 内边距padding 外边距margin 圆角边框 盒子阴影 浮动 标准文档流 display 父级边框塌陷问题及overflow float及与display的对比 定位 相对定位 绝对定位与固定定位 z-index
常用css样式大全
m0_73442777的博客
06-17 262
本文将为你呈现一个全面的CSS常用样式大全，涵盖了各种常见的样式需求，包括文本样式、背景样式、盒模型样式、浮动与定位样式、动画效果和响应式布局等。你将学习如何使用CSS属性和选择器来设置字体样式、颜色、边框、阴影、过渡和变换等。
1.1 css style 样式定义：行内 style 属性、单页 ＜style＞ 标签、多页 ＜style＞ 标签
一个字，学
03-15 8280
把长宽等样式定义在某个标签的属性中，仅对当前标签产生影响，如：style 里面不能省略掉像素单位 px两种定义属性的方式：不用 style：用 style：此时一般把 定义在 标签里面：标签中的样式可以对该页面的同一类/多类元素产生影响：除了直接对某类标签统一设置样式，还可以结合 class 属性分类设置样式：class 类名可以多个组合在一起： 3.多页 标签：对多个页面产生影响 在 css 文件夹中新建 文件，把单页 标签里面的内容剪切进来，然后回到 标签 里面添加 标签，就能对多个页面产
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Rkatsiteli

你的鼓励将是我创作的最大动力！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值