-
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]查看全部
-
属性 描述 CSS transition 简写属性，用于在一个属性中设置四个过渡属性。 3 transition-property 规定应用过渡的 CSS 属性的名称。 3 transition-duration 定义过渡效果花费的时间。默认是 0。 3 transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。 3 transition-delay 规定过渡效果何时开始。默认是 0。 3 在CSS中创建简单的过渡效果可以从以下几个步骤来实现： 第一，在默认样式中声明元素的初始状态样式； 第二，声明过渡元素最终状态样式，比如悬浮状态； 第三，在默认样式中通过添加过渡函数，添加一些不同的样式。查看全部
-
CSS3 跨列设置column-span column-span主要用来定义一个分列元素中的子元素能跨列多少。column-width、column-count等属性能让一元素分成多列，不管里面元素如何排放顺序，他们都是从左向右的放置内容，但有时我们需要基中一段内容或一个标题不进行分列，也就是横跨所有列，此时column-span就可以轻松实现，此属性的语法如下。 column-span: none | all 取值说明 属性值 属性值说明 none 此值为column-span的默认值，表示不跨越任何列。 all 这个值跟none值刚好相反，表示的是元素跨越所有列，并定位在列的Ｚ轴之上。 例如：将第一个标题跨越所有列，代码： column-span:all;查看全部
-
任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。如下图所示： 在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。 transform-origin取值和元素设置背景中的background-position取值类似，如下表所示： 关键词 百分比 top = top center = center top 50% 0 right = right center = center right 100%或〔100% 50%〕 bottom = bottom center = center 50% 100% bottom left = left center= center left 0 或〔 0 50%〕 center = center center 50%或（50% 50%) top left= left top 00 right top= top right 100% 0 bottom right = right bottom 100% 100% bottom left = left bottom 0 100%查看全部
-
border-radius:50px 0 0 50px;//这里的两个0很关键；查看全部
-
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];查看全部
-
translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。 translate我们分为三种情况： 1、translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动） 2、translateX(x)仅水平方向移动（X轴移动） 3、translateY(Y)仅垂直方向移动（Y轴移动） 实例演示：通过translate()函数将元素向Y轴下方移动50px,X轴右方移动100px。 HTML代码： <div class="wrapper"> <div>我向右向下移动</div> </div> CSS代码： .wrapper { width: 200px; height: 200px; border: 2px dotted red; margin: 20px auto; } .wrapper div { width: 200px; height: 200px; line-height: 200px; text-align: center; background: orange; color: #fff; -webkit-transform: translate(50px,100px); -moz-transform:translate(50px,100px); transform: translate(50px,100px); }查看全部
-
通过“:read-only”选择器来设置地址文本框的样式。查看全部
-
CSS3选择器 :checked选择器 表示的是选中状态。查看全部
-
CSS3选择器 :disabled选择器:disabled”选择器刚好与“:enabled”选择器相反，用来选择不可用表单元素。查看全部
-
ol > li:nth-child(2n){ background: orange; }查看全部
-
background: linear-gradient(to bottom,#dd2926,#a82724,#dd2926) no-repeat right / 1px 15px;查看全部
-
screen 屏幕 all全部 prit页面打印查看全部
-
缩放 scale()函数 让元素根据中心原点对对象进行缩放。 缩放 scale 具有三种情况： 1、 scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放） 例如： div:hover { -webkit-transform: scale(1.5,0.5); -moz-transform:scale(1.5,0.5) transform: scale(1.5,0.5); } 注意：Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。 2、scaleX(x)元素仅水平方向缩放（X轴缩放） 3、scaleY(y)元素仅垂直方向缩放（Y轴缩放）查看全部
-
扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。 1、skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）； 2、skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）； 3、skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形） 代码示例： -webkit-transform: skew(45deg); -moz-transform:skew(45deg) transform:skew(45deg);查看全部
举报
0/150
提交
取消