CSS实现登陆页面透明度的示例　

时间：2022-06-25 11:06:35 编辑：袖梨来源：一聚教程网

前几天想着练练透明度，结果从此踏上了各种不归路。

先简单的扯两句透明度吧：
background: rgba(255, 255, 255, 0.3);

这里的最后一个就是透明度啦，满值为1，表示不透明 0代表完全透明。

透明度问题轻松解决，然后试图将button和inputbox调整为同一大小的时候却遇到了问题，为了美观，我在inputbox内设置了padding，试图将文字向右靠一些，以起到美观的作用，结果padding却不算在width内，换言之，你可能需要计算来得出你要的宽度，但这明显违背了百分比定位的原则。

关于此，可以再这里看到：盒模型-学习CSS布局

之后师匠在我的苦求之下给我写了一个示例发给我：登陆页面

顺势读了一下发现了不少好货：box-sizing: border-box;，这一点就可以解决我们计算宽度的问题，在w3school和FF出的布局教程中均有记录。

border-box:

为元素设定的宽度和高度决定了元素的边框盒。
就是说，为元素指定的任何内边距和边框都将在已定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

如果需要取消的话，使用unset即可（或者说content-box）。

然后说说关于transform，transform是CSS3，但就表现力而言，却不仅仅是定位，可以看到，他还能旋转，xyz三个方向都可以呢，可神奇了。

transform: translateY(-38.2%);这句话就是Y轴向上38.2%（相对自己），transform可??/p>

例子

登录页面

推荐专题

最新下载

热门教程

CSS实现登陆页面透明度的示例

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程