box-sizing是css3新增的一个属性 其值有两个,分别是border-box和content-box 当我们给一个容器设置box-sizing为border-box时,就会出现一个很奇妙的现象 div { width: 300px; height: 100%; padding: 20px; ...
分类:
其他好文 时间:
2020-06-10 12:52:39
阅读次数:
114
1、属性选择器说明选取标签带有某些特殊属性的选择器常用选择符描述E[attr]选择具有attr属性的E元素E[attr="val"]选择具有attr属性且属性值等于val的E元素E[attr^="val"]选择具有attr属性且属性值以val开头的E元素E[attr$="val"]选择具有attr属性且属性值以val结尾的E元素E[att
分类:
Web程序 时间:
2020-06-10 09:17:07
阅读次数:
185
css3自适应关键字: max-content 01) max-content width:max-content表示采用内部元素宽度值最大的那个元素的宽度作为最终容器的宽度。如果出现文本,则相当于文本不换行 <style> .outer{ width:-webkit-max-content; wi ...
分类:
Web程序 时间:
2020-06-09 20:29:36
阅读次数:
146
为了软件美观,需要添加一些动画效果,一般呢是使用GIF控件去实现,但是实际上gif控件的效果不是很好,于是UI提供了另一种方案,图片轮播。 一开始单开一个线程,添加了一个Label控件,使用SetBkImage的方法进行轮播,但是不知道为什么,动画效果并没有体现出来,只是一个静态图。 于是我想到了另 ...
分类:
其他好文 时间:
2020-06-09 16:39:58
阅读次数:
64
css3属性-webkit-font-smoothing 对字体进行抗锯齿渲染可以使字体看起来会更清晰舒服。在图标字体成为一种趋势的今天,抗锯齿渲染使用也越来越多。font-smoothing是非标准的CSS定义。它被列入标准规范的草案中,后由于某些原因从web标准中被移除了。但是,我们可以用以下两 ...
分类:
Web程序 时间:
2020-06-09 14:26:37
阅读次数:
82
1.写在前面 在CSS3中,可以使用box-shadow属性来创建阴影效果来给二维平面增加深度效果,这个属性在前端开发中使用的非常多,例如segmentfault的首页就是使用了box-shadow属性来增加深度效果,今天我们就一起来看看这个属性。 2.box-shadow的基本语法 box-sha ...
分类:
Web程序 时间:
2020-06-08 14:24:59
阅读次数:
64
1.object-fit 由于图片原始大小都不一样,强行设定大小值会导致拉伸,如果不设定大小则参差不齐。 之前我们大多数用的 大多数都是利用background-size: cover 来避免对图片造成的压缩或者拉伸。 fill: 默认值,和未设置一样。使图片拉伸填满整个容器, 不保证保持原有的比例 ...
分类:
Web程序 时间:
2020-06-08 13:04:31
阅读次数:
72
过渡和动画都是CSS3的重要部分,今天有时间,了解些相关内容并记录下。在开始之前,首先看看CSS3的转化。 转化 CSS3的转化分为以下几种: translate 移动 rotate 旋转 scale 缩放 skew 倾斜 matrix 混合 每种转化都还有对应的3d版本 注意:闭合的内联元素不支持 ...
分类:
Web程序 时间:
2020-06-07 19:50:15
阅读次数:
79
在html中给table加一个斜线的表头有时是很有必要的,但是到底该怎么实现这种效果呢?总结了以下几种方法: 1、UI背景图实现 直接去找公司的UI,让她做一张图片,作为背景图片放到这里,然后撑满就可以了。是不是很简单!!! 2、 css3中transform属性 其实了解css3的朋友,一看到这个 ...
分类:
Web程序 时间:
2020-06-07 16:35:52
阅读次数:
78
在css中使用伪类虽然实现了样式的改变,但由于没有过渡效果会显得很生硬。以前如果要实现过渡,就需要借助第三方的js框架来实现。现在只需要使用CSS3的过渡(transition)功能,就可以从一组样式平滑的切换到另一组样式。 (1)背景色过渡变化 下面鼠标移入后,按钮背景色会慢慢地变成黄色。鼠标离开 ...
分类:
Web程序 时间:
2020-06-07 16:35:02
阅读次数:
232