css3
文章平均质量分 56
sunlizhen
这个作者很懒,什么都没留下…
展开
-
css 文字颜色渐变
background: linear-gradient(90deg, #F8BA02 0%, #FFFFFF 100%);-webkit-background-clip: text;color: transparent;把这几行代码放在要设置的文字的css上即可原创 2020-11-18 16:31:53 · 347 阅读 · 0 评论 -
css3自适应布局单位vw,vh详解
视口单位(Viewport units) 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域;而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Viewport(视觉视口),Ideal Viewport(理想视口)。视口单位中的“视口”,桌面端指的是浏览器的可视区域;移动端指的就是Viewport中的Layout Viewport,“视区”所指为浏览器内部的可视区域大小,即window.innerWidth/window.innerHeight大小...原创 2020-10-30 16:05:38 · 3873 阅读 · 0 评论 -
使用before、after给文字前后添加横线
<style scoped lang="scss">.endSession{ text-align: center; position: relative; &:after{ content: ''; width: 52px; height: 1px; border-bottom: 1px solid #ccc; di...原创 2019-12-17 17:39:16 · 1274 阅读 · 0 评论 -
DIV高度自适应浏览器高度方法
html,body{ width:100%; height:100%}div{ position: absolute; width: 100%; height: 100%; background: #ccc; left: 0; top: 0;}原创 2019-11-27 17:24:31 · 824 阅读 · 0 评论 -
CSS实现背景透明,文字不透明,兼容所有浏览器
测试浏览器:VirtIE6、虚拟机下XP的IE6、纯正IE8、纯正IE8下QQ浏览器、WIN7下的IE 9.0.32 、WIN8下的IE 10.0.21、chrome 38.0 、QQ浏览器8.0-IE10.0.5、safari 5.1.7、opera 25.0如何实现背景透明,文字不透明,兼容所有浏览器?我们平时所说的调整透明度,其实在样式中是调整不透明度,如下图所示例:打开...原创 2018-11-08 15:22:51 · 494 阅读 · 0 评论 -
详解css3 pointer-events
pointer-events 更像是JavaScript,它能够: 阻止用户的点击动作产生任何效果 阻止缺省鼠标指针的显示 阻止CSS里的 hover 和 active 状态的变化触发事件 阻止JavaScript点击动作触发的事件 实际代码使用中案例:1、提交页面,提交按钮点击后,添加这个样式属性(style="pointer-events"),来防止...原创 2019-01-17 14:40:24 · 505 阅读 · 0 评论 -
CSS样式自动换行(强制换行,包括表格)
正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的 white-space:normal ,当定义的宽度之后自动换行html:<div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div>css:#wrap{white-space:normal; width:200px; } ...原创 2019-01-21 14:16:53 · 4680 阅读 · 0 评论 -
解决table边框圆角无效
将border-collapse 设置为separatecss 样式 给 border border-radius原创 2019-03-07 19:52:11 · 1128 阅读 · 0 评论 -
CSS Transform让百分比宽高布局元素水平垂直居中
很早以前了解过当元素是固定宽度和高度的时候,水平垂直高居中的方法可以设置margin的负值来使其居中,这个负值是元素的宽和高的一半,比如宽高是100px,那么就用margin-left:-50px;margin-top:-50px这样的写法。但如果这个元素的宽高是用百分比表示呢?如果使用百分比来设置宽高的话,以前哪个负值方法已经用不上了,这个我们发现在一个小的窍门,就是使用CSS3中的tran...原创 2019-03-11 14:23:06 · 604 阅读 · 0 评论 -
float 左右布局,左右div等高
一. 利用背景图,做出左右等高的模拟效果这种方法不是真正的左右等高,而是在外框元素中添加一张背景图片,当内容增多时,背景会纵向重复,就会形成左右等高的效果。这种方法不是真正的div自动等高,而是在左右两个div的外面添加一个外框元素,给这个外框元素添加一个背景,当内容增多时,背景就会向下纵向重复,看起来就向左右两个div都自动向下延伸了一样。下面写一下详细代码。Html代码:...原创 2019-05-15 17:18:53 · 1914 阅读 · 0 评论 -
响应式布局
响应式布局总结响应式布局的开发基础知识本章主要分为以下几个部分正确理解响应式设计 响应式设计的步骤 响应式设计需要注意的问题 响应式网页布局实现原理 第一:正确理解响应式布局 响应式网页设计就是一个网站能够兼容多个终端-而不是为每个终端做一个特定的版本。打个比方来说:现在社会有很多响应产品,例如折叠沙发,折叠床等等,当我们需要把沙发放到一个角落的时候,此刻沙发就好比d...原创 2018-11-13 10:04:21 · 141 阅读 · 0 评论 -
段落中字体围绕第一个字 或者字体围绕图片
放大看酸辣粉你俩快点撒娇疯狂的思考了疯狂的酸辣粉考虑对方考虑的考虑发sd卡浪费点卡考了多少分? .first{ width:300px; height:300px; border:1px solid #ccc; margin:0 auto; }原创 2017-07-20 21:03:21 · 1148 阅读 · 0 评论 -
tab-size, word-wrap属性的应用
1.tab-size属性原创 2014-08-30 21:30:18 · 348 阅读 · 0 评论 -
CSS3新增颜色表示方式 Transparent属性 Opacity属性
RGBA模式HSL模式HSLA模式原创 2014-08-30 21:32:09 · 5186 阅读 · 0 评论 -
CSS3的新增选择器
1.CSS3关系选择器选择符名称版本简介E F包含选择符CSS1 选择所有被E元素包含的F元素E>F子选择符CSS2选择所有作为E元素的子元素FE+F相原创 2014-08-30 21:17:10 · 358 阅读 · 0 评论 -
新增文本属性:
1.CSS3新增文本属性原创 2014-08-30 21:19:10 · 357 阅读 · 0 评论 -
CSS3 新特性实例制作
1.1.多栏布局原创 2014-08-31 18:19:02 · 369 阅读 · 0 评论 -
怎样让你的网页更快的被搜索到
通过设置title的关键字等,如下标题一个页面只能出现一个title:是百度搜索时,出现的标题;description:是百度搜索时出现的标题下边的一段文字;如果没有description,第一段文字就会被认为是description;如果没有title,h1的内容就会被认为是title;如果想让图片被搜索到,在图片上这是title、alt的属性;原创 2017-07-20 20:49:19 · 536 阅读 · 0 评论 -
a链接的访问状态
Document /* CSS的属性规则:遵守就近原则! 如果将visited放在hover和active的后面,访问过后就不会有hover和active的效果;所以必须把visited放在前面; */ /* 未访问 */ a:link{ colo原创 2017-07-20 20:52:23 · 605 阅读 · 0 评论 -
form表单内容
form表单中包含的: action=“要提交的页面;method=“提交的方式” enctype=“multipart/form-data”:结合type=“file”如果不加这个图片传入后台就会知识图片的名字,如果加的话传入后台的就是图片的信息; 输入框 属性:cols=“可见的列数” rows=“可见的行数”; detalis原创 2017-07-20 20:53:17 · 449 阅读 · 0 评论 -
怎样将插入的图片居中
.banner img{ position:absolute; top:50%; left:50%; height:568px; margin-left:-924px; margin-top:-284px;}装img的容器定义pisition:relative即可;其中banner为装img的容器,将banner定义为原创 2017-07-20 20:55:47 · 1583 阅读 · 0 评论 -
Text-overflow,text-align,text-transform,text-decoration,text-shadow,text-fill-color,text-stroke的属性
1.Text-overflow属性原创 2014-08-30 21:23:56 · 558 阅读 · 0 评论