<div data-msg="Open this file in Github Desktop">hover</div>
div{
width:100px;
border:1px solid red;
position:relative;
}
div:hover:after{
content:attr(data-msg);
position:absolute;
font-size: 12px;
width:200%;
line-height:30px;
text-align:center;
left:0;
top:25px;
border:1px solid green;
}
:required
伪类指定具有必填项属性的表单:valid
伪类指定一个通过匹配要求的表单元素(结合type使用):invalid
伪类指定某一未通过匹配要求的元素<form>
<div class="form-group">
<label>name</label>
<input type="text" required placeholder="请输入名称">
</div>
<div class="form-group">
<label>email</label>
<input type="email" required placeholder="请输入邮箱">
</div>
<div class="form-group">
<label>homepage</label>
<input type="url" placeholder="请输入博客url">
</div>
</form>
.valid {
border-color: #429032;
box-shadow: inset 5px 0 0 #429032;
}
.invalid {
border-color: #D61D1D;
box-shadow: inset 5px 0 0 #D61D1D;
}
.form-group {
width: 32rem;
padding: 1rem;
border: 1px solid transparent;
&:hover {
border-color: #eee;
transition: border .2s;
}
label {
display: block;
font-weight: normal;
}
input{
display: block;
width: 100%;
line-height: 2rem;
padding: .5rem .5rem .5rem 1rem;
border: 1px solid #ccc;
outline: none;
&:valid {
@extend .valid;
}
&:invalid {
@extend .invalid;
}
}
}
tr: nth-of-type(2n) {
background-color: red;
}
tr: nth-of-type(2n+1) {
background-color: green;
}
tr:nth-child(n+5):nth-child(-n+10) {
/* 选择5-10子元素? */
}
通过
max-height
来实现transition所需的具体高度来hack实现
<ul>
<li>
<div class="hd"> 列表1 </div>
<div class="bd">列表内容<br>内容列表内容<br>内容列表内容<br>内容</div>
</li>
<li>
<div class="hd"> 列表1 </div>
<div class="bd">列表内容<br>内容列表内容<br>内容列表内容<br>内容</div>
</li>
<li>
<div class="hd"> 列表1 </div>
<div class="bd">列表内容<br>内容列表内容<br>内容列表内容<br>内容</div>
</li>
</ul>
.bd {
max-height:0;
overflow:hidden;
transition: all 1s ease-out;
}
li:hover .bd {
max-height: 600px;
transition-timing-function: ease-in;
}
rem
布局不在使用JavaScript
设置有时候,移动端用
rem
布局时候,根据不同的屏幕宽度要设置不同的font-size
来做到适配,要写一坨JS
来设置,能不能不用JS
呢?(以750px
设计稿为基准,font-size
设置为100px
只考虑DRP=2
)
js
实现代码: (- 一行代码的`css`实现: (`html{font-size: calc(100vw / 7.5)}`)
## 利用`transparent`属性实现各种三角形/提示框
> [推荐链接](https://www.cnblogs.com/lhb25/p/css-and-css3-triangle.html)
```css
#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
如果项目中遇到,建议做成通用的宏,方便在项目各处调用
需求如下图所示: 波浪线
基本思路:截取’X’的上半部分得到一个’V’,再结合repeat
生成波浪线,下面是scss的mixin(注意linear-gradient的兼容性)
@mixin waveline($color,$h) {
position: relative;
&::after {
content: '';
display: block;
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: $h;
background: linear-gradient(135deg, transparent, transparent 45%, $color, transparent 55%, transparent 100%),
linear-gradient(45deg, transparent, transparent 45%, $color, transparent 55%, transparent 100%);
background-size: $h * 2 $h * 2;
}
}
使用效果: 波浪线效果
CSS
实现文字两段对齐(text-align-last: justify
)ios
支持弹性滚动(body{-webkit-overflow-scrolling: touch;}
)input
光标颜色:input
元素添加样式caret-color: auto;
input
元素添加样式caret-color: red;
filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%);
)