css基础

CSS的filter属性的使用方法

https://www.pweb123.com — 2024-10-09 09:34:38

CSS滤镜的使用方法：filter:filtername(parameters)　即 filter:滤镜名称（参数）alpha：设置透明层次blur：创建高速度移动效果，即模糊效果chroma：制作专用颜色透明DropShadow：创建对象的固定影子FlipH：创建水平镜像图片FlipV：创建垂直镜像图片glow：加光辉在附近对象的边外gra

使用 CSS 实现毛玻璃效果

https://www.pweb123.com — 2024-04-07 08:01:55

backdrop-filter 属性实现毛玻璃效果最简单的方式就是使用 CSS 的 backdrop-filter 属性。这个属性可以对元素背后的区域应用各种滤镜效果,如模糊、饱和度调节等。示例: blur-element{background-color:rgba(255,255,255,0 2); *半透明背景* backdrop-filter:blur(10px); *背景模

修改placeholder颜色的方法

https://www.pweb123.com — 2022-09-21 10:43:31

input::-webkit-input-placeholder{ *WebKitbrowsers* color:white;}input:-moz-placeholder{ *MozillaFirefox4to18* color:white;}input::-moz-placeholder{ *MozillaFirefox19+* color:white;}input:-ms-input-placeholder{ *InternetExplorer10+* color:white;}

纯CSS美化radio和checkbox

https://www.pweb123.com — 2022-09-09 11:46:52

通过CSS3来实现将radio和checkbox美化的效果。可是兼容性并非非常好，PC端仅仅支持chrome浏览器（IE和Firefox測试不行，其它没有很多其它測试）。然后微信端和QQ端訪问也是正常。因为LZ所做的功能正好仅仅须要在微信端展示，所以并未深入研究。当然，尽管说不能兼容，可是对于为什么

input disable属性下面文本框或者按钮的颜色（对IOS兼容处理）

https://www.pweb123.com — 2020-03-25 23:06:12

有些时候我们在处理input时会禁用，但在ios系统下禁用的input标签会变色，如何处理呢，只需要你加上这段css，在修改color即可。input:disabled,input[disabled]{color:red;-webkit-text-fill-color:red;-webkit-opacity:1;opacity:1;}

CSS3 ------- object-fit属性

https://www.pweb123.com — 2019-07-09 11:49:25

做项目经常会遇到图片列表展示，图片一般是用户从后台上传的，上传的图片尺寸千差万别。如果前端不控制图片大小，整个排版就会很乱，如果给定长宽，图片又会变形，用背景图片来处理有特别麻烦。这个问题一直苦恼了我好久，最近终于找到解决办法了。css有一个object-fit属性，用来指定

苹果浏览器点击链接或绑定click按钮会出现一个半透明的灰色背景解决方案

https://www.pweb123.com — 2017-09-26 22:06:26

html*{outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0);}设置这个，页面默认的元素点击后的边效果为0，webkit 内核的字体大小不自动适配。最后一个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时

css设置各种中文字体如雅黑、黑体、宋体、楷体等等

https://www.pweb123.com — 2017-04-26 19:26:50

由于css调用字体的时候，不支持中文写法，所以需要改成对应的英文写法！代码如下: selector{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu }说明：加上中文名微软雅黑是为了兼容opera。MicrosoftJhengHei为微软正黑体，STHeiti为华文黑

css3非常实用的transform小属性

https://www.pweb123.com — 2017-03-05 12:03:55

在写页面切图的时候，有时候需要一些设计师需要简单的小效果，比如鼠标滑过，光圈转动或者图片翻转之类的效果，这些简单的小效果不值得去动用插件或者jq去写的，在css3中提供这样的方法，直接可以在css中操作这些小效果。效果一:360°旋转修改rotate(旋转度数)transform:rotate(

站长总结的十个常用但是有可能记不住的css

https://www.pweb123.com — 2016-08-28 09:06:05

1、圆角-moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;behavior:url(border-radius htc);2、透明度opacity:0 85; -ms-filter:"progid:DXImageTransform Microsoft Alpha(Opacity=85)"; * ie8 * filter:alpha(opacity=85); * ie5-7 * -moz-op

详解CSS3中@media的实际使用

https://www.pweb123.com — 2016-08-24 11:36:26

如今，电脑显示器的屏幕分辨率向越来越大发展，而手机等移动设备终端的分辨率却不可能大到哪里去。越来越多的网站，开始让自己的页面自适合各种分辨率，在小分辨率下显示基本的内容，在大分辨率下显示全部功能，甚至是分多等级的多版本。作为web前端开发人员需要知道并且会用这种知识

CSS的单位及css3的calc()及line-height百分比

https://www.pweb123.com — 2015-11-23 18:26:42

单位介绍说到css的单位，大家应该首先想到的是px,也就是像素，我们在网页布局中一般都是用px，但是近年来自适应网页布局越来越多，em和百分比也经常用到了。然后随着手机的流行，web app和hybrid app的开发，都用到了css3技术，在css3中，新增了许多单位，rem、vw和vh、vmin和vmax

ie下input与button按钮背景图失效不显示的解决办法

https://www.pweb123.com — 2015-09-28 14:28:46

笔者从事网页前端代码页面工程师已有多年，作为一个网页重构人员常常会遇到一些莫名其妙的DIV+CSS（正确的说法是XHTML+CSS）在IE、FireFox火狐、谷歌浏览器CHROME、苹果浏览器Safari、Opera下不兼容的问题，其中IE6最为棘手，历来IE6就被诸位前端代码人员所诅咒，无奈其用户在中国

css常用的一些技巧

https://www.pweb123.com — 2015-07-20 09:18:16

一使用css缩写使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，这里就不展开描述。二明确定义单位，除非值为0忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写width=100，但是在CSS中，你必须给一个准确的单位，

CSS十问——好奇心+刨根问底=CSSer

https://www.pweb123.com — 2015-07-05 22:36:47

原文出处：一个小学生欢迎分享原创到伯乐头条最近有时间，想把酝酿的几篇博客都写出来，今天前端小学生带着10个问题，跟大家分享一下学习CSS的一些体会，我觉得想学好CSS，必须保持一颗好奇心和刨根问底的劲头，而不是复制粘贴，得过且过。本人能力有限，这篇文章从构思加完成用

区别不同浏览器的CSS hack写法

https://www.pweb123.com — 2015-04-01 14:09:00

区别IE6与FF： background:orange;*background:blue;区别IE6与IE7： background:green !important;background:blue;区别IE7与FF： background:orange; *background:green;区别FF，IE7，IE6： background:orange;*background:green !important;*background:blue;注：IE都能

高端企业网站下拉导航条

https://www.pweb123.com — 2015-01-27 09:36:00

高端企业网站下拉导航条jQuery代码，红色大气，下拉菜单无限增加二级栏目。使用方法1、在head引入下面的代码：< script>$(function(){$("dl") hide()

自动换行 word-break:break-all和word-wrap:break-word

https://www.pweb123.com — 2014-05-05 18:05:00

word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。它们的区别就在于：1，word-break:break-all 例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulati

几个解决兼容IE678不支持html5标签的几个方法

https://www.pweb123.com — 2013-12-04 20:47:00

HTML5 ">html5大行其道的时代已经到来。如果你还在等待浏览器兼容，说明你已经与web脱节几条街了。当然，这得益于移动客户端的蓬勃发展。如果还在纠结于，是否应该掌握html5和css3技术时，请狠狠的抽自己几个嘴巴，然后，苦学吧！因为前端的春天已经到来，而且不止一个春天。如果你不

什么是DIV+CSS标准_什么是web标准？

https://www.pweb123.com — 2013-10-09 13:23:00

WEB标准，即网站标准。目前通常所说的WEB标准一般指网站建设采用基于XHTML语言的网站设计语言,WEB标准中典型的应用模式是"div+css"，一定程度上说web标准即我们认为的div+css标准化。这里div+css网站将介绍web标准的需要注意地方，让你了解开发网页时候应该多多考虑W3C标准，及ht