乖兔博客

乖兔 > CMS系统 > CSS >

CMS系统 / CSS

css3实现网页背景图片高斯模糊效果
CSS

css3实现网页背景图片高斯模糊效果

乖兔 更新于:2020-12-08 评论 ( 0 )

css3可以通过代码渲染的方式实现网页背景的高斯模糊效果,告别更换背景时候的ps批图。分享三种css3实现网页背景图片高斯模糊效果的方法。 css3实现网页背景模糊方法一(正常模糊): Stylehtml,body{width:100%;height:100%;}*{margin:0;padding:0;}/*背景模糊*/.bg{width:100%;height:100%;position:relative;background:url(./bg.jpg)no-repeatfixed;background-size:cover;box-sizing:border-box;filter:b...

纯css实现网页background背景图适应浏览器宽度
CSS

纯css实现网页background背景图适应浏览器宽度

乖兔 更新于:2020-12-01 评论 ( 0 )

鉴于访客屏幕大小不一,所以一般会将网页的背景图尽量做大开始应大屏幕的浏览效果。但是,这也导致小屏浏览的时候因为无法显示整张图片而导致页面浏览体验变差。 这时候,使用css控制网页背景图随浏览器的宽度而实现自适应,并且将背景图进行等比例缩放,即可实现想要的效果。 纯css实现网页background背景图适应浏览器宽度的代码: backgr...

纯css修改浏览器scrollbar滚动条样式
CSS

纯css修改浏览器scrollbar滚动条样式

乖兔 更新于:2020-11-30 评论 ( 0 )

把网站前台的UI设计好之后,前台去浏览,有时候总觉得怪怪的。最后发现问题是因为浏览器的滚动条不协调导致的。而且,不同浏览器的滚动条还有很多差别。 这里,我们可以通过css修改浏览器scrollbar滚动条样式的方法,让页面更加美观舒适。 纯css修改浏览器scrollbar滚动条样式代码: ::-webkit-scrollbar{width:.5rem;height:.5rem;background:hsla(0,0%,100%,0.6);}::-...

css3实现div边框闪烁呼吸灯效果
CSS

css3实现div边框闪烁呼吸灯效果

乖兔 更新于:2020-11-29 评论 ( 0 )

有时候,处于营销或者其他原因,我们希望网页上的某些元素或者某个div更显眼一些,从而让访客可以关注到这些内容。而由于需要照顾网页美观协调,又不能把它改成太过显眼的颜色,比如大红色。 这时候就可以使用css3的呼吸灯效果,为内容所在div做一个闪烁的边框来实现。 css3实现div边框闪烁呼吸灯效果的代码: htmlbodyhead.arrow_box{animation:glow8...

纯div和css实现右下角固定div
CSS

纯div和css实现右下角固定div

乖兔 更新于:2020-11-29 评论 ( 0 )

在制作一些百度竞价落地页或者营销型的企业网站的时候,经常会需要在网页页面右下角展示一个固定的div,里面放置一个form表单供客户填写,用来收集客户信息。 这个功能很实用,并且只需要几行简单的css代码即可实现。 先来看一下纯div和css实现右下角固定div的效果: 纯div和css实现右下角固定div的代码示例: !DOCTYPEhtmlhtmlheadmetahttp-equiv=content-t...

用css改变placeholder的颜色减少视觉冲突
CSS

用css改变placeholder的颜色减少视觉冲突

乖兔 更新于:2020-03-26 评论 ( 0 )

在input输入框中使用place内写入文字的方法可以对此输入框做一些简单的说明,但是其颜色如果和输入框文本颜色那样深就会显得有点突兀,可以使用css样式来修改placeolder的文本颜色,使用方法如下: input::-webkit-input-placeholder{color:#ccc;}/*使用webkit内核的浏览器*/input::-moz-input-placeholder{color:#ccc;}/*Firefox版本4-18*/input::-moz-placeholder{color:#ccc;}/*Firefox版本19+...

cdn在线引用font awesome字体图标和css加速加载
CSS

cdn在线引用font awesome字体图标和css加速加载

乖兔 更新于:2020-03-16 评论 ( 0 )

随着font awesome的不断完善和字体图标的不断增加,他的css和字体文件的体积也变得越来越大。下载下来的话会加重自己网站的负担,并且拖慢页面的记载速度。此时可以通过调用一些公共静态资源库的cdn资源来实现加速页面加载和减轻自己服务期负担的目的。 首先引用在线的font awesome的css文件: linkrel=stylesheethref=https://maxcdn.bootstrapcdn.com/font-awesome/4....

css3 表格隔行变色隔列变色代码写法
CSS

css3 表格隔行变色隔列变色代码写法

乖兔 更新于:2020-03-07 评论 ( 0 )

使用css3实现表格隔行换色/隔列变色/指定行字体颜色和背景颜色的方法 tabletr:nth-child(odd){background:#F4F4F4;}/*奇数行背景色*/tabletd:nth-child(even){color:#C00;}/*偶数行字体颜色*/tabletr:nth-child(5){background:#73B1E0;color:#FFF;}/*指定第五行背景色和文字颜色*/ 实际效果实例: 此段实例对应html代码: !DOCTYPEHTMLPUBLIC-//W3C//DTDHTML4.01Transitional//ENhttp://www.w3.org/TR/html4/loose.dtdhtmlh...

分享4个漂亮的css表格样式
CSS

分享4个漂亮的css表格样式

乖兔 更新于:2020-03-07 评论 ( 1 )

话不多说,直接上四个比较经典的漂亮css表格样式代码: ①第一个,浅灰色表和css样式,非常经典 此样式仅用配色实现,无需调用图片,代码是: styletype=text/csstable.gridtable{font-family:verdana,arial,sans-serif;font-size:11px;color:#333333;border-width:1px;border-color:#666666;border-collapse:collapse;}table.gridtableth{border-width:1px;padding:8px;border-style:solid;border-color:#666666;background-color:#dedede...