01 CSS技巧
去除最后一行元素距离值
- 设置为几列，如果是4个参数就是4列，三个为三列，并且每列可以设置宽度大小
- 如 grid-template-columns: 50px 50px 50px 50px;
- 以上意思为 每列 50px 的宽度
HTML结构
<ul class="container">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
CSS结构
.container {
display: grid;
grid-template-columns: auto auto auto auto;
gap: 40px;
margin: 0 auto;
width: 600px;
height: 500px;
background: pink;
}
.container > li {
background: #ccc;
}
视频混合效果
使用gif格式图片作为背景，文字背景改为透明
html结构
<div class="container">
<p>
皇帝的圣旨到达东宫时，顾剑还在试图多喂几口饭给李承鄞。
顾剑之所以住进东宫，目的之一就在于照顾李承鄞。他这小表弟可不是令人省心的，当初在西州，他见识过李承鄞堪称鸽子胃的小饭量。他之前还考虑过是不是因为西州的饭菜他吃不惯，结果回中原才发现这人就是吃菜少，跟在哪里没关系。
之前他没这个立场说，毕竟在这狗崽子心里他就是一可供驱使的杀手，虽然这种错误认识拜他所赐，但他现在逮到机会，非要报一下之前气得牙痒痒的怨气。
作为一个曾经高冷的剑客，哪怕是因为卸下担子而变得自在阳光，也绝对不能崩了人设，至少在他表弟面前的威严要有。于是他也不开口，他所需要做的就是在李承鄞欲放筷的时候，抿起嘴，摆出一副不满的模样，在李承鄞的筷子与饭菜之间游移，从而达到震慑谴责的目的，迫使李承鄞继续吃饭，直到顾剑本人也放下筷子。
顾剑瞧着李承鄞的饭量却是比之前长进不少，觉得这个方法可以持之以恒地使用。他就知道自己的威慑力不减当年，内心暗自窃喜。
而实际上，李承鄞内心想的是：表哥吃饭的样子好可爱....他抬头看我了，两颊还鼓鼓的，像一只小松鼠......表哥那个眼神是嗔怪吗，也对，我如果离开饭桌，他也不好意思再吃下去了，不行，为了表哥我也要多吃点.......
好不容易等到顾剑放下碗筷，李承鄞也长出一口气，放松下来。毕竟吃个饭被表哥盯了好几次这种事情，还是很考验心性的。他一方面要时时刻刻注重自己吃饭的仪态，一方面还要克制住自己回看他的本能。
这样看似和谐的吃饭时光，重复了很多天，直到皇帝的圣旨到来。
圣旨言明，即刻派李承鄞前往西州，三月为期，平定西州内乱，并签订新的合约，以增进澧朝与西州的和睦关系。待其回朝之日，便是继任大宝之时。
李承鄞恭恭敬敬地接过圣旨，朗声道：“儿臣定不负父皇所托。”
他对这道圣旨丝毫不意外，早些时候他就得到了西州内乱的消息。曲小枫回西州肯定是瞒不过虽缠绵病榻却仍耳听六路眼观八方的皇帝，以他父皇的德性，不在他即位之前给他出些难题才奇怪呢。
不过，既然提到西州.....李承鄞一边摆出一副孝子的模样应付那来传圣旨的公公，假模假样地说几句“还请公公转告父皇，儿臣时刻忧心父皇，希望他能安心养病.....”，一边又在悄悄地观察顾剑的神色...没什么特别的神情，还好还好。
等李承鄞送走了传旨公公，又交代好他离京后的事宜，正要去寻顾剑时，有宫人禀报顾公子刚出去了。
听到这个消息，李承鄞的第一反应是顾剑要离开了。
是厌倦了宫里的生活还是因为西州内乱他要赶去寻小枫？他知道东宫的日子确实枯燥乏味，不比顾剑之前在西州或是浪迹天涯时的自由。他也明白，顾剑时小枫的师傅，亦欠她良多，绝不会坐视小枫陷入险境。
可是，他李承鄞怎么办？表哥就真的一丝一毫不考虑他的感受吗？
李承鄞内心慌乱又难受。这几日与顾剑朝夕相处，他感受到了温情，那是他在诡谲阴谋中的保持良善的支撑。他能感受到心中的那份温暖正慢慢复苏。他的眼里终于不再满是算计，而是多施用一些温和的法子，就像他曾经崇慕的圣贤那般。
皇帝病重，罢朝会。他不需要再上朝，而是每日在清凉殿处理政务。顾剑有时会主动来寻他，兴致来了便替他研磨。更多的时候，是他废寝忘食批改奏折时，拖着他去吃饭休息。有时候朝中无事，奏折批完了，他就会去承欢殿寻他，讨杯茶水。纵使再大的难题，再冗杂的心绪，都会在顾剑温声细语的念叨中抚平。
他一天最喜欢的时刻就是午膳。顾剑吃得多些，有时也会同他共饮几杯。他喝不惯西州的桑椹酒，顾剑一边嘲笑他，一边为他倒上中原的梨花酿。李承鄞一直没有告诉顾剑，他曾经不喜膳食与美酒，是因为幼时差点因此而死。深宫中想杀一个人的法子多的是，那时他因背靠高家而得父皇不喜，皇后也疏于照顾他，只让他修业习道，偌大深宫，他必须要学会自保。久而久之，也生不起什么口腹之欲了。
而现在，好不容易再燃起的期待又要刚获得就被摧毁吗？他李承鄞凭什么就要受到命运这般捉弄，留不住所有珍视的人与事物。他渴望权势，先是为自保，后是为留住心爱之人。可到头了，又是一无所有。
李承鄞觉得可笑，又生出几分不甘。如果顾剑真的离开了上京，那么他一直要亲自把他带回来，再也不要放他走。强求也比放弃的好。
心里那些阴暗的念头愈演愈烈，李承鄞只觉得蛰伏许久的心魔又要破笼而出。他死死攥着桌檐，手心慢慢渗出血来也不在意。
他不能，他不能屈服。他阴暗的占有欲曾经差点毁了小枫，现在又要毁掉顾剑吗？
他不愿意。
</p>
</div>
CSS结构
.container {
margin: 0 auto;
width: 1300px;
height: 100vh;
box-sizing: border-box;
/* overflow: hidden; */
}
p {
position: absolute;
padding: 100px;
width: 1300px;
font-size: 26px;
font-weight: bolder;
color: #000;
background: url(./images/bgc_gif.gif);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
图文混合效果
html结构
<body>
<div class="container">
<h1>我有故人抱剑来</h1>
</div>
</body>
CSS结构
.container {
margin: 0 auto;
width: 900px;
height: 600px;
}
h1 {
text-align: center;
font-size: 120px;
background: url(./images/login_bgc.png) no-repeat;
background-size: 100%;
/* 下面两行必须设置在 */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
文字倒影
HTML结构
<body>
<h2>我有故人抱剑来</h2>
</body>
CSS结构
h2 {
width: 100%;
text-align: center;
font-size: 66px;
-webkit-box-reflect:below 10px -webkit-linear-gradient(transparent, transparent 35%, rgba(255,255,255,.3));
}
文字根据图片形状环绕
HTML结构
<body>
<div class="block">
<div class="picture">
<img src="" alt="" />
</div>
<div class="font_box">
皇帝的圣旨到达东宫时，顾剑还在试图多喂几口饭给李承鄞。
顾剑之所以住进东宫，目的之一就在于照顾李承鄞。他这小表弟可不是令人省心的，当初在西州，他见识过李承鄞堪称鸽子胃的小饭量。他之前还考虑过是不是因为西州的饭菜他吃不惯，结果回中原才发现这人就是吃菜少，跟在哪里没关系。
之前他没这个立场说，毕竟在这狗崽子心里他就是一可供驱使的杀手，虽然这种错误认识拜他所赐，但他现在逮到机会，非要报一下之前气得牙痒痒的怨气。
作为一个曾经高冷的剑客，哪怕是因为卸下担子而变得自在阳光，也绝对不能崩了人设，至少在他表弟面前的威严要有。于是他也不开口，他所需要做的就是在李承鄞欲放筷的时候，抿起嘴，摆出一副不满的模样，在李承鄞的筷子与饭菜之间游移，从而达到震慑谴责的目的，迫使李承鄞继续吃饭，直到顾剑本人也放下筷子。
顾剑瞧着李承鄞的饭量却是比之前长进不少，觉得这个方法可以持之以恒地使用。他就知道自己的威慑力不减当年，内心暗自窃喜。
而实际上，李承鄞内心想的是：表哥吃饭的样子好可爱....他抬头看我了，两颊还鼓鼓的，像一只小松鼠......表哥那个眼神是嗔怪吗，也对，我如果离开饭桌，他也不好意思再吃下去了，不行，为了表哥我也要多吃点.......
好不容易等到顾剑放下碗筷，李承鄞也长出一口气，放松下来。毕竟吃个饭被表哥盯了好几次这种事情，还是很考验心性的。他一方面要时时刻刻注重自己吃饭的仪态
</div>
</div>
</body>
CSS结构
.block {
margin: 30px auto;
width: 300px;
height: 200px;
}
.picture {
float: left;
width: 200px;
height: 200px;
shape-outside: circle();
clip-path: circle();
background-color: pink;
}
img {
width: 100%;
height: 100%;
object-fit: contain;
}
