中国评论新闻网:CSS躬行记(3)——CSS属性拾遗

admin 3周前 (09-13) 科技 51 3

一、粘滞定位

  粘滞定位(sticky)与相对定位类似,既不会脱离正常流,也不会改变元素盒类型,而且会保留原先所占的空间。它会相对于包罗块偏移,它的包罗块分为两种,第一种和绝对定位一样;第二种是最近的转动祖先,即overflow属性是hidden、scroll、auto或overlay时。接下来用一个例子来先容粘滞定位的用法,如下代码所示。

<style>
  div {
    overflow: auto;
  }
  span {
    position: sticky;
    top: 10px;
    left: 20px;
    width: 70px;
    height: 50px;
    background: #CCC;
  }
</style>
<div>
  改变粘滞定位的位置,改变
  <span>粘滞定位的位置</span>
  ,改变粘滞定位的位置,改变粘滞定位的位置,
  改变粘滞定位的位置,改变粘滞定位的位置,
  改变粘滞定位的位置。
</div>

  span元素的包罗块是div元素,下图描绘了页面转动时,粘滞定位的效果。在中央图中可以看到偏移后的span元素所占的空间被保留了,在右边图中可以看到span元素粘滞在指定的偏移位置。

二、边框图像

  CSS3新增了一组属性,允许在边框中加载图像,接下来会逐个解说。

  第一个是border-image-source属性,它能指定图像泉源,如下所示。在下图中,会发现加载的图像位于div元素的四个角,而不是沿着边框绘制。

div {
  border: 40px solid;
  border-image-source: url(./star.png);
}

  注重,边框宽度需要指定,而且其外观不能是none,否则将无法显示。

  第二个是border-image-slice属性,它包罗四条裁剪线,可吸收四个偏移值,划分距图像的上右下左四个边,下图演示了偏移33%时的裁剪线。

  执行下面的样式(效果如下图所示),在将circle.png分解成9块后,编号为1、2、3、4的四个圆位于div元素的四个角,而编号为5、6、7、8的四个圆则会被拉伸。

div {
  border-image-source: url(./circle.png);
  border-image-slice: 33%;
}

中国评论新闻网:CSS躬行记(3)——CSS属性拾遗 第1张

  border-image-slice属性还能吸收一个fill关键字(如下图所示),可将编号为9的圆作为div元素的靠山图。

div {
  border-image-slice: 33% fill;
}

中国评论新闻网:CSS躬行记(3)——CSS属性拾遗 第2张

  第三个是border-image-repeat属性,它能指定填充边框的方式,默认是拉伸,现在改成平铺(如下图所示),界限处的图像可能会被裁剪。

div {
  border-image-repeat: repeat;
}

中国评论新闻网:CSS躬行记(3)——CSS属性拾遗 第3张

  第四个是border-image-width属性,与border-image-slice属性类似,也有4条裁剪线,只是它裁剪的对象是边框。在下图中,左边是未界说border-image-width属性的div元素,右边是将该属性设为20px后的效果。

div {
  border-image-width: 20px;
}

中国评论新闻网:CSS躬行记(3)——CSS属性拾遗 第4张

  第五个是border-image-outset属性,可声明图像超出边框的距离,即向外偏移。在下图中,左边是未界说border-image-outset属性的div元素,右边是将该属性设为10px后的效果。

div {
  border-image-outset: 10px;
}

中国评论新闻网:CSS躬行记(3)——CSS属性拾遗 第5张

  第六个是border-image属性,可将上述5个属性整合到一起,划定差别的值之间用斜杠(/)分开,而且还指定了顺序:首先是border-image-slice,然后是border-image-width,最后是border-image-outset。而border-image-source和border-image-repeat两个属性可放在随便位置,但要注重,不能放置在其它属性值之中。下面是个整合示例,效果如下图所示。

div {
  border-image: url(./circle.png) 33% / 20px / 10px repeat;
}

中国评论新闻网:CSS躬行记(3)——CSS属性拾遗 第6张

三、字符间距

  letter-spacing属性可界说字符之间的距离,可以突出某段文本,例如为p元素界说10px的字符间距,如下图所示。&NBsp;

<style>
  p {
    letter-spacing: 10px;
  }
</style>
<p>字符间距是10px</p>

中国评论新闻网:CSS躬行记(3)——CSS属性拾遗 第7张

四、文本阴影

  text-shadow属性可为文本添加阴影,适用于题目或短文本。阴影值由四部门组成,划分是颜色、横向偏移、纵向偏移和模糊半径。下面的示例为一段文本添加了灰色的阴影,效果如下图所示。

<style>
p {
  text-shadow: #CCC 5px 10px 2px;
}
</style>
<p>My name is Strick.</p>

中国评论新闻网:CSS躬行记(3)——CSS属性拾遗 第8张

  注重,模糊半径越大,阴影就越模糊。妥善行使好text-shadow属性,还能创造出3D效果,下面的样式泉源于网络,字体放大后,3D更显著,效果如下图所示。

p {
  font-size: 48px;
  text-shadow: 0 1px 1px #BBB, 
    0 2px 0 #999, 
    0 3px 0 #888, 
    0 4px 0 #777,
    0 5px 0 #666, 
    0 6px 0 #555, 
    0 7px 0 #444, 
    0 8px 0 #333, 
    0 9px 7px #302314;
}

中国评论新闻网:CSS躬行记(3)——CSS属性拾遗 第9张

五、多重靠山

  CSS3支持多重靠山,大部门靠山属性都能通过逗号分开多个值,包罗简写的background属性也能接受多个值。在下面的示例中,为div元素声明晰两个靠山,先声明的star.png将会在lake.png之上,如下图所示。

div {
  background-image: url(./star.png), url(./lake.png);
  background-position: left bottom, center;
  background-repeat: repeat-x, no-repeat;
}
/* 等价于 */
div {
  background: url(./star.png) left bottom repeat-x,
            url(./lake.png) center no-repeat;
}

中国评论新闻网:CSS躬行记(3)——CSS属性拾遗 第10张

  注重,不能为background-color指定多个值。当用background属性声明多个靠山时,颜色只能出现在最后一个靠山层中,如下代码所示。

/* 错误 */
div {
  background: #FC0 url(./star.png) left bottom repeat-x,
            url(./lake.png) center no-repeat;
}
/* 准确 */
div {
  background: url(./star.png) left bottom repeat-x,
            #FC0 url(./lake.png) center no-repeat;
}

六、矩阵函数

  在CSS中,矩阵函数是变形的基础,位移、缩放、倾斜和旋转四种变形都能用矩阵来实现,例如用矩阵函数来形貌水平偏移10px,垂直偏移5px,代码如下所示。

.matrix {
  traNSform: matrix(1, 0, 0, 1, 10, 5);
  /* 等同于 */
  transform: translate(10px, 5px);
}

  现在将矩阵函数的6个参数用小写字母来命名,如下所示,

transform: matrix(a, b, c, d, e, f);

  对应的矩阵如下所示,注重考察6个参数的位置。

中国评论新闻网:CSS躬行记(3)——CSS属性拾遗 第11张

  矩阵函数的原理是通过调换元素的所有坐标,重新定位元素,从而实现种种变形。下面是矩阵的盘算公式,其中x和y是元素的横坐标和纵坐标。

中国评论新闻网:CSS躬行记(3)——CSS属性拾遗 第12张

  ax+cy+e是变形后的横坐标,bx+dy+f是变形后的纵坐标。详细的盘算历程如下所示,以矩阵的第一行为例,相同底色的变量会相乘,获得的积再相加。

中国评论新闻网:CSS躬行记(3)——CSS属性拾遗 第13张

  在下图中,列出了与四类变形函数等效的矩阵符号(引用自《The CSS3 matrix() Transform for the Mathematically Challenged》一文),其中旋转和倾斜还用到了三角函数。

中国评论新闻网:CSS躬行记(3)——CSS属性拾遗 第14张

  在三维空间,也有一个对应的矩阵函数:matrix3d(),此处不再睁开叙述,可以查看网上的相关资料。

七、三维变形

  在三维空间中有三个轴,如下图所示,其中Z轴示意用户与平面的距离(即透视值)。

中国评论新闻网:CSS躬行记(3)——CSS属性拾遗 第15张

  perspective()是一个透视函数,它能吸收一个非零正数透视值。在下面的示例中,会让四个元素围绕Y轴旋转30°,除了第一个元素,其它都调用了透视函数。通过下图的效果可知,当透视值越小时,变形效果越失真。

.rotate {
  transform: rotateY(30deg);
}
.perspective-200 {
  transform: perspective(200px) rotateY(30deg);
}
.perspective-600 {
  transform: perspective(600px) rotateY(30deg);
}
.perspective-1200 {
  transform: perspective(1200px) rotateY(30deg);
}

中国评论新闻网:CSS躬行记(3)——CSS属性拾遗 第16张

  注重,透视函数需要声明在变形函数列表的首位,以免在透视前变形,出现错误的效果。

  除了perspective()函数之外,CSS3还提供了一个perspective属性。前者只能为目的元素声明透视,而后者声明的透视能应用于其子元素。举个简朴的例子,为父元素section声明perspective属性,子元素依旧围绕Y轴旋转30°,代码如下所示,获得的效果如下图所示。

<style>
  .perspective {
    perspective: 200px;
  }
  .perspective > div {
    transform: rotateY(30deg);
  }
</style>
<section class="perspective">
  <div>200px</div>
  <div>200px</div>
</section>

中国评论新闻网:CSS躬行记(3)——CSS属性拾遗 第17张

  perspective-origin属性可修改透视原点,也叫消失点,其取值与transform-origin类似。默认情况下,这个点位于元素的中央,接下来修改上例父元素的透视原点,样式如下,效果如下图所示。

.perspective {
  perspective-origin: top left;
}

中国评论新闻网:CSS躬行记(3)——CSS属性拾遗 第18张

  backface-visibility属性可控制元素后头朝向用户时是否渲染,行使该属性可设计出3D翻转的特效。接下来会一步步的实现该功效,首先是建立HTML结构,如下所示,section是两个div的父元素。

<section class="flip">
  <div class="positive">正面</div>
  <div class="reverse">反面</div>
</section>

  然后在父元素中添加过渡时间和透视,并将transform-style属性设为preserve-3d,这样才能让子元素和父元素处于同一个三维空间,样式如下。

.flip {
  position: relative;
  width: 100px;
  height: 100px;
  transition: 0.6s;
  transform-style: preserve-3d;
  perspective: 1000px;
}

  再将两个子元素的backface-visibility属性设为hidden,而且将第二个div元素围绕Y轴旋转180°,样式如下。

.flip > div {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.flip .positive {
  background: #FC0;
}
.flip .reverse {
  background: #F60;
  transform: rotateY(180deg);
}

  最后为父元素界说:hover伪类,也就是在鼠标悬停时,自身也围绕Y轴旋转180°,隐藏第一个div元素,显示第二个div元素,样式如下。

.flip:hover {
  transform: rotateY(180deg);
}

  由于是动态的效果,因此需要用多张图来描绘翻转的历程,如下图所示。

中国评论新闻网:CSS躬行记(3)——CSS属性拾遗 第19张

,

sunbet

www.ysycy.com与伊顺源清真餐饮达成战略合作,在伊顺及亚太地区建立直营平台。为Sunbet会员提供线上多种娱乐游戏,将用完善的技术、贴心的服务、雄厚的资金赢取每位Sunbet代理、会员的口碑。

AllBetGaming声明:该文看法仅代表作者自己,与本平台无关。转载请注明:中国评论新闻网:CSS躬行记(3)——CSS属性拾遗

相关推荐

网友评论

  • (*)

最新评论

  • Allbet注册 2020-08-18 00:13:37 回复

    Allbetwww.aLLbetgame.us欢迎进入Allbet平台(Allbet Gaming):www.aLLbetgame.us,欧博平台开放欧博(Allbet)开户、欧博(Allbet)代理开户、欧博(Allbet)电脑客户端、欧博(Allbet)APP下载等业务。继续,看了一半的

    1
  • Allbet注册 2020-08-18 00:13:45 回复

    Allbetwww.aLLbetgame.us欢迎进入Allbet平台(Allbet Gaming):www.aLLbetgame.us,欧博平台开放欧博(Allbet)开户、欧博(Allbet)代理开户、欧博(Allbet)电脑客户端、欧博(Allbet)APP下载等业务。继续,看了一半的

    2
  • UG环球代理 2020-09-13 00:06:57 回复

    欧博allbet注册欢迎进入欧博allbet注册(Allbet Game):www.aLLbetgame.us,欧博官网是欧博集团的官方网站。欧博官网开放Allbet注册、Allbe代理、Allbet电脑客户端、Allbet手机版下载等业务。可以的哈,眼熟我

    3

站点信息

  • 文章总数:657
  • 页面总数:0
  • 分类总数:8
  • 标签总数:1016
  • 评论总数:245
  • 浏览总数:10378