border-radius

CSS3 border-radius圆角的实现方法及用法详解

以前想实现一个圆角是比较麻烦的,不过现在CSS3来了,实现圆角变的那么的简单只需要一句话:border-radius即可。下面青岛星网跟大家分享下:border-radius的具体用法。 CSS3圆角只需设置一个属性:border-radius(含义是"边框半径")。你为这个属性提供一个值,就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用:em、ex、pt、px、百... »

小程序中使用css var变量(使js可以动态设置css样式属性)

小程序中使用css var变量(使js可以动态设置css样式属性)

使用sass,stylus可以很方便的使用变量来做样式设计,其实css也同样可以定义变量,在小程序中由于原生不支持动态css语法,so,可以使用css变量来使用开发工作变简单。 »

border-radius给元素添加圆角边框的方法

border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */ 不要以为border-radius的值只能用px单位,你还可以用百分比或者em,但兼容性目前还不太好。 实心上半圆: 方法:把高度(height)设为宽度(width)的一半,并且只... »

border-radius IE8兼容处理的方法

根据canisue(http://caniuse.com/#search=border-radius),border-radius兼容性如下图所示: 测试代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-C... »

使用CSS的border-radius属性 设置圆弧

使用CSS的border-radius属性 设置圆弧

就使用像素px进行设置 而不是百分比设置六:一次性标识所有角度进行不一样的设置七:也可以分别对不同角度进行设置总结以上所述是小编给大家介绍的使用CSS的border-radius属性 设置圆弧,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。 »

caniuse-css-var

妙用CSS变量,让你的CSS变得更心动

作者:JowayYoung 仓库:Github、CodePen 博客:掘金、思否、知乎、简书、头条、CSDN 公众号:IQ前端 联系我:关注公众号后有我的微信哟 特别声明:原创不易,未经授权不得对此文章进行转载或抄袭,否则按侵权处理,如需转载或开通公众号白名单可联系我,希望各位尊重原创的知识产权 前言 CSS变量又叫CSS自定义属性,为什么会突然提起这个很少人用到的东西呢?因为最近在重构个人官网,... »

巧用CSS3制作时尚的网页加载动画效果

巧用CSS3制作时尚的网页加载动画效果

在现代网页设计中,预加载是一种很常见的情形。作为用户,我们希望网页快速并且流畅 — 我们不喜欢等待。当内容被加载时,预加载能提供视觉反馈,并管理用户期望,降低用户放弃浏览网站的几率。 源文件代码:MissYuan_源文件.rar 用CSS3创建预加载动画的准备条件 在我们深入CSS3,创建预加载动画集之前,我们先讨论一些CSS3中非常重要的属性。 伪元素(Pseudo Elements):befo... »

4种方案解决CSS浏览器兼容性问题

4种方案解决CSS浏览器兼容性问题

前端是一个苦逼的职业,不仅因为技术更新快,而且要会的东西实在太多了,更让人头疼的是,还要面临各种适配、兼容性问题。 4种方案解决CSS浏览器兼容性问题 为什么会有浏览器兼容性问题? 还不是因为浏览器厂商太多了! Chrome,Frirefox,Safari,Edge,IE6,IE7,IE8,IE9…360安全浏览器,qq浏览器,世界之窗,TT,搜狗,opera,maxthon(傲游)…... »

Vue+Element实现网页版个人简历系统(推荐)

Vue+Element实现网页版个人简历系统(推荐)

这篇文章介绍一个使用Vue+Element实现的个人简历系统,主要用到的技术有:vue、element、css3、css定位。 作者在window10进行开发,目前只在chrome上进行过测试,没有大的毛病。但是还有很多小功能还不完善,代码也未进行优化,后续会继续完善功能,优化代码。 声明:项目相对来说就是一个纯静态页面,代码都比较简单,大佬可闭眼绕过,或者看一眼留下宝贵意见也可   一... »

利用css+原生js制作简单的钟表

利用css+原生js制作简单的钟表。效果如下所示   实现该效果,分三大块:html、javascript、css html部分 html部分比较简单,定义一个clock的div,内部有原点、时分秒针、日期以及时间,至于钟表上的刻度、数字等元素,因为量比较多,采用jvascript生成  <!doctype html> <html> <head&g... »

JavaScript简单实现弹出拖拽窗口(二)

接上文JavaScript简单实现弹出拖拽窗口(一)进行学习。  下面开始具体分析代码部分:  首先我们先确认下结构:  悬浮窗口:初始不可见。包括标题栏和内容栏,标题栏内有标题和关闭按钮。  遮罩层:初始不可见。用于设置弹出悬浮窗口时的半透明背景,  按钮:用于点击弹出悬浮窗口。  下面进行详细解释  1、要让窗口能自由移动,... »

Bootstarp风格的toggle效果分享

 最近在写项目的时候想要一个这样的效果, 我知道这个效果在 flat-ui中有, 但是我又不想引用一整个flat-ui;   这个效果依赖html5的transition, 所以浏览器兼容成问题;   从flat-ui中把这个效果的js和html,以及css给拨离出来;   整体的代码如下: 运行下面代码 <!DOCTYPE html> <html> <he... »

js HTML5 Ajax实现文件上传进度条功能

/*@cc_on!=(d.getFullYear()+'-'+ (d.getMonth()+1) + '-' + d.get »

jquery+css3实现会动的小圆圈效果

本文实例讲述了jquery+css3实现会动的小圆圈效果。分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>那些变换颜色的小豆豆</title> <sc... »

jQuery抛物线运动实现方法(附完整demo源码下载)

本文实例讲述了jQuery抛物线运动实现方法。分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示效果。 完整实例代码点击此处本站下载。 具体代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>抛物线运动效果</title> ... »

详解Bootstrap四种图片样式

在本章中,我们将学习 Bootstrap 对图片的支持。Bootstrap 提供了四个可对图片应用简单样式的class,分别是: img-rounded 添加 border-radius:6px 来获得图片圆角 img-circle 添加 border-radius:50% 来让整个图片变成圆形 img-thumbnail 添加一些内边距(padding)和一个灰色的边框 img-responsi... »

jquery实现清新实用的网页菜单效果

本文实例讲述了jquery实现清新实用的网页菜单效果。分享给大家供大家参考。具体如下: 这是一款应用了jQuery插件来实现的网页菜单,看上去十分清新实用,来自美国Flickr网站,不知道Flickr网站的朋友自己去查。这款菜单在用户点击了主菜单项的时候,会滑出二级的子菜单,菜单前边带有小图标,增加了人性化体验。 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/j... »

jquery实现左右滑动菜单效果代码

本文实例讲述了jquery实现左右滑动菜单效果代码。分享给大家供大家参考。具体如下:这里演示了三种背景颜色左右滑动jquery菜单导航效果,IE下有问题,本菜单使用了CSS3的部分属性,因此建议使用火狐或Chrome等浏览器获取最佳效果。当把鼠标移到菜单上的时候,对应菜单项的背景会变化,而且本菜单具有圆角的效果。 »

解析Angular 2+ 样式绑定方式

解析Angular 2+ 样式绑定方式

引言 开发ngx(angular 2+ 以后都直接称为ngx)也有1年半的时间了,刚开始开发的时候使用的还是angular2 RC版,现在已经出angular5了,时光飞逝啊! ngx从设计之初就是一个component-based的框架,所以大到一个页面,小到一个按钮,都是一个component。 这就涉及到了组件的重用,设计通用组件的时候,必不可少的就是动态的样式绑定。 回头想想, angul... »

vue一个页面实现音乐播放器的示例

vue一个页面实现音乐播放器的示例

本文介绍了vue一个页面实现音乐播放器的示例,分享给大家,具体如下: 效果如下: 项目地址:https://github.com/ermu592275254/MiniMusicPlayer 演示地址: https://ermu592275254.github.io/MiniMusicPlayer/(歌曲链接已失效) 开发前构思 界面 做音乐播放器,界面一定要炫酷。太low了听歌没感觉。本身是为了在... »

JS小球抛物线轨迹运动的两种实现方法详解

本文实例讲述了JS小球抛物线轨迹运动的两种实现方法。分享给大家供大家参考,具体如下: js实现小球抛物轨迹运动的大致思路: 1、用setInterval()方法,进行间隔性刷新,更新小球位置,以实现动态效果 2、绘制小球和运动区域,运动区域可通过flex布局实现垂直居中 3、用物理公式S(y)=1/2*g*t*t,S(x)=V(x)t来计算路径 现确定V(x)=4m/s,刷新的时间间隔设置为0.1... »

javascript动画系列之模拟滚动条

前面的话 当元素内容溢出元素尺寸范围时,会出现滚动条。但由于滚动条在各浏览器下表现不同,兼容性不好。所以,模拟滚动条也是很常见的应用。本文将详细介绍滚动条模拟 原理介绍 滚动条模拟实际上和元素模拟拖拽类似。仅仅通过范围限定,使元素只可以在单一方向上拖拽 <div id="box" style="height: 200px;width: 16px;background-color:#F5F5F... »

通过bootstrap全面学习less

        很早之前就听说过less了,但是一直拖着没去学习。最近抽空看了less,其实语法很简单,看一遍基本就知道怎么用了。但是问题又来了,那我在什么时候用less呢。平时自己写页面用less的话,感觉是方便了些,但是难道好处就只是这样?   刚好最近也在学习bootstrap,发现其源文件就是用less写的,看了之后,我... »

JavaScript动态检验密码强度的实现方法

JavaScript动态检验密码强度的实现方法

平时我们会在某些网站的注册页面或者更改密码的页面发现当我们输入密码时,会有一个类似于进度条的长条进行提示用户输入的密码强度。如下图: 我看到有些人用几张不同的图片来替换,这样似乎可以,但是不太好。所以我通过其他方式实现。 实质上这是根据用户输入的不同密码强度来改变 颜色区域的长度。 密码强度这个横条实质是一个div,其他标记也可以,div里面有一个span标记,我就是通过改变span的长度和颜色来... »

js制作支付倒计时页面

js制作支付倒计时页面

本文实例为大家分享了js支付倒计时页面制作代码,供大家参考,具体内容如下 (图一) (图二) (图三) (图四) 实现目标 一、页面在图一时开始进行倒计时(可以点击取消订单按钮,支付页面消失)。 二、倒计时完毕,出现删除订单。 三、单击删除订单,弹出弹框,询问是否要真正删除订单。 四、单击确定,即可删除订单。 如上图所示效果展示,这里给出所有的源代码(如需运行,只需要修改EJS文件中引入的CSS路... »

Page 1 of 7123»