随笔笔记

虽说疫情已经控制住了，但是仅和母亲在家，长期也足不出户，除了腰逐渐疼痛之外，并无太多的心得感悟，思想这种东西，不是想想说说就能得到的，所以我期望开学，更多和外界事件的接触，与个人的思想发生冲突碰撞，才能使得思想更加成熟，体悟到更多的东西。

这次把html5一些细节的笔记分享一下吧

1.渐变球体样式

width: 300px;

height: 300px;

background-color: red;

border-radius: 50%;

margin: 100px auto;

/* 立体感的球体。 用background-image否则会覆盖掉背景色,径向渐变的颜色有透明度 */

background-image: radial-gradient(at 80px 80px, rgba(0,0,0,0), rgba(0,0,0,0.6));

2.柔光盒子阴影的样式

position: absolute;

top: -40px;

width: 171px;

border: 1px solid rgba(0, 0, 0, .2);

box-shadow: 0 2px 4px  rgba(0, 0, 0, .2);

padding: 5px 0;

font-size: 18px;

line-height: 20px;

color:  #333;

HTML文字超过两行以后 就用省略号显示代替

style="overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;"

4.line-clamp控制文本行数

-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：

display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。

-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本

5.button默认样式去除

margin: 0;

  padding: 0;

  background-color: transparent;

  border: 0px solid transparent;

  outline: none;

6..父盒子遮住子盒子，可以用以下代码

父盒子pointer- events：none；//取消父盒子点击事件

父盒子里包含的子盒子：pointer-events：auto；//让子盒子恢复点击事件

7.linear-gradient(270deg,white,#eeeeee,#eeeeee,white);分割渐变线的颜色。

8.background: linear-gradient(180deg,rgba(255,255,255,.5),rgba(220,224,236,.5));淡淡的金属质感背景色