YeomanYe

button{
    position:relative;
}
button:before{
    content:'';
    position:absolute;
    top:-10px;right:-10px;bottom:-10px;left:-10px;
}

YeomanYe

.test{
border: 10px solid transparent;
/*使用内阴影代替边框效果*/
/*使用外阴影时会产生怪异效果,因为透明边框也会被阴影投射*/
box-shadow: 0 0 0 1px rgba(0,0,0,.3) inset;
background-clip: padding-box;
}

YeomanYe

<dialog id="modal">Showing Dialog</dialog>
<button onclick="document.querySelector('modal').showModal()"></button>
<style>
    /*设置遮罩的样式*/
    dialog::backdrop{
        background: rgba(0,0,0,.8);
    }
</style>

YeomanYe

.test{
    /*1vmax相当于1vw和1vh中的较大值*/
    /*1vmin相当于1vw和1vh中的较小值*/
    /*100vw相当于整个视口的宽度,100vh相当于整个视口的高度*/
    box-shadow:0 0 0 50vmax rgba(0,0,0,.8);
    /*配合固定定位使用，或者页面没有滚动条再使用*/
    /*无法阻止用户操纵页面*/
    position:fixed;
}

YeomanYe

body.dimmed::before {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
background: rgba(0,0,0,.8);
}

YeomanYe

<style>
.image-slider {
position:relative;
display: inline-block;
}
.image-slider > div {
position: absolute;
top: 0; bottom: 0; left: 0;
width: 50%;
overflow: hidden;

YeomanYe

<!-- 所有非对话框元素都用main包裹起来 -->
<main>Bacon Ipsum dolor sit amet...</main>
<dialog>
O HAI, I'm a dialog. Click on me to dismiss.
</dialog>
<!-- 其他对话框都写在这里 -->

<style>
    main {
    transition: .6s filter;

YeomanYe

ul{
    display: inline-block;
    overflow: auto;
    width: 7.2em;
    height: 7em;
    border: 1px solid silver;
    padding: .3em .5em;
    list-style: none;
    margin-top: 2em;
    font: 100 200%/1.6 'Frutiger LT Std', sans-serif;

YeomanYe

.test{
cursor: url('transparent.gif');
cursor: none;
}

YeomanYe

li:first-child:nth-last-child(-n+4),
li:first-child:nth-last-child(-n+4) ~ li {
/* 当列表最多包含四项时，命中所有列表项 */
}