CSS
杨咩咩yang
.
展开
-
图片渐变效果css
css样式:background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8))效果图对比:原创 2020-05-07 15:47:52 · 3661 阅读 · 0 评论 -
[Intervention] Unable to preventDefault inside passive event listener due to target being ...
移动端界面滚动时报错 :[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080解决方案: 定义全局样式:...原创 2020-04-18 15:26:53 · 1013 阅读 · 0 评论 -
input 加了padding 属性后破坏样式:加样式box-sizing:border-box
盒模型box-sizing:取值:1.content-box 默认值,标准盒模型,设置宽度为内容宽度,实际宽度为左右边距加上左右边框加上左右填充再加上内容宽度2.border-box 设置宽度等于元素内容宽度,content包含了元素的border和padding3.inherit 继承父元素的盒模型模式解决问题:input 加了padding 属性后破坏样式边框和填充被...原创 2020-03-13 23:17:30 · 635 阅读 · 0 评论 -
div宽高按照特定比例显示内容padding-bottom
使div的宽和高始终按照一定比例显示,定义好宽度,高度为0,然后使用padding-bottom Html内容: <div class="a"></div> style样式内容: .a{ overflow: hidden width: 100% height: 0 padding-bottom: 3...原创 2020-03-06 00:28:54 · 573 阅读 · 0 评论 -
style css 里使用import和自定义的目录
import前面加 @ 符号目录关键字前加 ~ 符号例如:<style lang="stylus" scoped> @import '~styles/varibless.styl'</style>注意:以上代码中自定义了styles牡蛎,目录定义为:vue项目中,在build的webpack.base.cong.js中alias: { '...原创 2020-03-04 19:23:34 · 1649 阅读 · 0 评论 -
CSS3盒子变换transform(缩放、旋转、3D旋转、翻面)
理解:transform man 变形金刚1、translate(x,y) 设置盒子位移2、scale(x,y) 设置盒子缩放(比例)3、rotate(deg) 设置盒子旋转(角度deg。默认顺时针,负值代表逆时针转)4、skew(x-angle,y-angle) 设置盒子斜切5、perspective 设置透视距离(经验数值800px)6、transform-style flat ...原创 2019-11-06 13:59:07 · 4015 阅读 · 0 评论 -
CSS3动画transition
transition:属性 过度时间 过度运动方式 延迟时间;1、transition-property 设置过渡的属性,比如:width height background-color(所有属性写all. 分开属性用逗号隔开)2、transition-duration 设置过渡的时间,比如:1s 500ms3、transition-timing-function 设置过渡的运动...原创 2019-11-06 12:21:24 · 613 阅读 · 0 评论 -
CSS3圆角、阴影、rgba(透明度)
圆角:设置某一个角的圆角,比如设置左上角的圆角:border-top-left-radius:30px 60px;同时分别设置四个角: border-radius:30px 60px 120px 150px;设置四个圆角相同:border-radius:50%;阴影:分别设置阴影:水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影b...原创 2019-11-06 11:44:09 · 1270 阅读 · 0 评论 -
CSS权重、CSS3选择器
CSS权重指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式。权重等级:可以把样式的应用方式分为几个等级,按照等级来计算权重1、!important,加在样式属性值后,权重值为 100002、内联样式,如:style=””,权重值为10003、ID选择器,如:#content,权重值为1004、类,伪类和属性...原创 2019-11-06 11:00:59 · 192 阅读 · 0 评论 -
css解决图片下方出现3像素空白bug
/* 解决图片下方出现3像素空白bug */img{ display: block;}原理: 将元素转化为块元素原创 2019-11-04 16:23:11 · 1206 阅读 · 0 评论 -
ul 里面的 li有莫名奇妙的间距,消除方法
给 ul 和 li 重新设置字体大小,ul加样式font-size:0;再给li重新设置字体大小原创 2019-11-04 15:38:09 · 620 阅读 · 0 评论 -
css样式重置:清除原本标签样式、margin-top塌陷
body,ul,li,p,h1,h2,h3,h4,h5,h6,dl,dd,input,select,form{ padding: 0; margin: 0;}/*让h标签继承body内设置的字体大小*/h1,h2,h3,h4,h5,h6{ font-size: 100%;}/*去掉小圆点*/ul{ list-style: none;}/*去掉文字倾...原创 2019-10-04 19:56:00 · 2013 阅读 · 0 评论 -
idea写多个css标签<li>列快捷方法
写75个li列。写如下代码li*75>img[src="img/$.jpg"]//写75个li列。鼠标光标放在此行最后一个字符后,按tab键鼠标光标放在此行最后一个字符后,按tab键 <li><img src="img/1.jpg" alt=""></li> <li><img src="img...原创 2019-06-14 14:37:27 · 2156 阅读 · 2 评论 -
CSS常见属性
原创 2018-02-07 17:15:55 · 222 阅读 · 0 评论 -
css常见属性记录(未完待续)
1.<a></a> a{text-decoration:none;}/*去掉超链接的下划线*/ a:hover{color:#f60;}/*鼠标放上去的样式*/ 先隐藏<span></span>的内容即加css属性:display:none;,然后在在鼠标放在a链接上市,显示span内容,加display:block; a:hove...原创 2018-02-23 09:53:46 · 180 阅读 · 0 评论 -
CSS3
CSS3新增的属性选择器:注意:若^= 与 $=选择器无效,则 给字符要加“”注意:$=的选择器的att的最后一个字符是数字,则要用反斜杠后跟数字前的字符和最后一个字符。例如id="section1",则写成:[id$="\n1"],若id="section11",,则[id$="\n11"]UI元素状态伪类选择器:...原创 2018-02-27 09:29:54 · 163 阅读 · 0 评论 -
CSS选择器及其优先级
ID选择器( # ) > class选择器( . ) > 标签选择器(标签名)组合选择器:选择器与选择器之间用 逗号 隔开。例如:h1,h2,h3,p{font-size:14px;color:red}伪元素选择器:a:link(正常连接的样式) a:link{color:red;} a:hover(鼠标放上去的样式) a:hover{color:green;} a...原创 2018-02-06 10:27:16 · 320 阅读 · 0 评论 -
使用选择器在页面中插入内容
插入文字:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>使用选择器在页面插入内容</title> <style> h2:before{原创 2018-02-28 17:03:51 · 215 阅读 · 0 评论 -
文字阴影与自动换行
text-shadow:文字阴影<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>文字阴影与自动换行</title> <style> h1{原创 2018-03-01 10:39:29 · 189 阅读 · 0 评论 -
div+span+css
<div></div> 块级元素(占一整行)<span></span>内联元素(只占自己需要的或规定的)注意:这两个HTML标签在整个HTML标记中没有任何意义,他们存在的整个意义就是为了应用css样式盒子模型属性: margin:盒子外边距 eg: margin-top:0; margin-left:0; paddin...原创 2018-02-22 09:39:30 · 456 阅读 · 0 评论 -
css外部样式不起作用
解决方案一:将css引入的link的属性补充完整解决方案二:将自己定义的CSS样式引入标签放在bootstrap框架样式引用之后,确保不会被在加载页面时被框架的样式覆盖<link href="../css/bootstrap.min.css" rel="stylesheet"><!--<link rel="stylesheet" href="../css/bootstra...原创 2018-03-02 11:59:29 · 13364 阅读 · 1 评论 -
写一个页面的前期准备
写一个页面前,首先要准备好通用样式,1.去掉所有标签的外边距和内边距2.定义全局字体大小,行高,字体3.设置页面居中和综艺宽度4.准备好元素要浮动的方向,左浮动、右浮动、清除浮动(清除浮动时在受浮动影响的区域前<div class="float_clear"></div>)*{margin: 0;padding: 0;}body{font: 14px/24px Micro...原创 2018-02-24 13:06:20 · 257 阅读 · 0 评论 -
css实现背景渐变色
<div class="gradient"></div>添加样式:.gradient{ width:100%; /*height:150px;*/ background:-webkit-gradient(linear, 0 0, 0 bottom, from(#344a73), to(#353334))}原创 2018-03-14 11:09:27 · 574 阅读 · 0 评论 -
overflow:hidden
作用: 1.隐藏溢出2.清除浮动原创 2017-09-29 08:58:49 · 225 阅读 · 0 评论