CSS如何实现圆角的outline效果？

一.首先,outline是个很牛逼的东西温故而知鑫,10年的时候写过一篇可用性方面的文章:“页面可用性之outline轮廓外框的一些研究”,还算挺有用的:3年之后,也就是13年,介绍了个没什么使用价值的东西:“纯CSS实现的outline切换transition动画效果”. 个把星期前,微博上抛出了个问题: 有没有什么方法利用CSS以及使用一层标签实现下面这个加号效果,[不能使用::before, ::after伪元素实现][box-shadow效果不好,我试过了,小尺寸IE会糊边],兼容IE…

利用CSS3实现圆角的outline效果的教程

一.首先,outline是个很牛的东西1. border近亲outline和border是近亲,为什么这么讲呢?首先,都是给元素外面套框框的:其次,支持的属性值几乎都是一样的,例如,outline-style和border-style值dotted, dashed, solid, ...之类的,一些语法也几乎一样.如果这都不算近亲,你让绝对定位和浮动何言以对. 2. IE8+支持outline严格来讲属于CSS3属性,但是IE8+浏览器就支持了.外挂一句,IE9+浏览器的outline还支持in…

纯CSS实现各类气球泡泡对话框效果

原文纯CSS实现各类气球泡泡对话框效果一.关于纯CSS实现气泡对话框首先,来张大图: 上边这张黄黄的,大大的,圆圆的,有个小尾巴,文字内容有些YY的图片,就是使用纯CSS实现的气泡对话框效果,一点图片都没有哦.看到这里,你是不是跟我一样,有些惊叹CSS的潜力呢.关于这张图片,暂时先放到一边,下面我要讲一些与主旨相关的比较重要的,同时又很实用的一些技术. 我们首先看下面这一张图片(截自人人网): 可能颜色有点淡,在左上角有个90度的尖角,于是整个形成了一个气泡对话框.现在考考你,如果你来实现…

css输入框的圆角

转载:http://jingyan.baidu.com/article/73c3ce28f0b38fe50343d926.html 1.原理是四张圆角的图片放在四个角上,就是圆角矩形的四个角,但这种方法只适合当做菜单栏背景,或是相框背景,输入框的圆角不适合用,当然,这种方法对图片要求比较高!!如果你切图很好的话,这种方法可以用在一切圆角矩形上,缺点很明显,即使图片可以重复利用,也需要大量图片. 优点:图片可以自适应,技术简单,只做网站主页的话,图片就可以大量重复利用,效果相当不错. ====…

css+div制作圆角矩形的四种方法

圆角矩形一向是设计师最倾心的一种设计,因为他们可以让整个网页生动起来,不那么死板,所以,作为一个优秀的网页设计师,学会一种或多种编辑圆角矩形的方法是必不可少的,而且圆角矩形应用范围极广,一个网页内的所有矩形基本上都需要设计为圆角矩形,这样网页才不会那么死气沉沉! 工具/原料一些简洁.直观.强悍的前端开发框架,如bootstrap 方法/步骤 1 我们先来看一下圆角矩形和普通矩形的区别. 虽然第二个是某知名搜索引擎,而且我天天要用,但是他的设计我还是想吐槽,直直的框真的很难看啊...=_= 相比…

HTML+CSS+Javascript实现轮播图效果

HTML+CSS+Javascript实现轮播图效果注意:根据自己图片大小来更改轮播图大小. <!doctype html> <html> <head> <meta charset="utf-8"> <style> * { margin: 0; padding: 0; } /*去掉ul.ol.li源有的样式*/ ul, ol, li { list-style: none; } /*设置图片样式为*/ img { width:…

css的img移上去边框效果及CSS透明度

css的img移上去边框效果: .v_comment img{ height:36px; height:36px; float:left; padding:1px; margin:2px; border: 1px solid #ddd; }.v_comment img:hover{border: 1px solid #ccc; -webkit-animation: comm 1.1s ease-in infinite; box-shadow:0 0 2px rgba(0,158,224,0.9)…

三角形变形记之纯css实现的分布导航条效果

三角形变形记,用纯css实现的分布导航条效果 <style type="text/css"> ul,li { list-style-type:none; font-size:13px; font-weight:bold; } li { float:left; position:relative; line-height:30px; background:#9BBB38; color:#fff; width:100px; height:30px; text-align:cen…

简单css实现input提示交互动画效果

通过基础CSS实现输入提示交互动画效果,并兼容各浏览器! 1.效果展示 2.css代码 h4 { margin: 30px 0; } input { margin:; font-size: 16px; } .input-fill-x, .input-outline-x, .textarea-outline-x { position: relative; } .input-control:focus + label { color: red; background: white; transfor…

使用CSS定位元素实现水平垂直居中效果

总结一下平时使用CSS技巧使元素达到水平居中效果相对定位(或绝对定位)实现水平垂直居中: element{ position:relative; /*这个属性也可以是absolute*/ width:200px; /*宽度按自己的要求设定*/ height:500px; /*高度按自己的要求设定*/ margin-left: -100px; /*这个值是宽度的一半,如宽度设置了100px,则这个属性的值就是-50px*/ margin-top: -250px; /*这个值是高度的一半*/ le…

一款纯css实现的垂直时间线效果

今天给大家分享一款纯css实现的垂直时间线效果.垂直时间线适合放在类似任务时间安排的网页上.该实现采用了蓝色作为主题色,界面效果还不错.一起看下效果图: 实现的代码. html代码: ... 阅读原文:一款纯css实现的垂直时间线效果…

css设置背景固定不滚动效果的示例

css设置背景固定不滚动效果的示例背景固定不滚动各位看到最多的无非就是QQ空间了,我们在很多的空间都可以看到内容滚动而北京图片不滚动了,下文整理了几个关于背景固定不滚动css代码. 一.css设置背景不滚动的效果 <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">…

CSS鼠标悬停图片加边框效果，页面布局发生错位的解决办法

CSS鼠标悬停图片加边框效果,页面布局发生错位的解决办法 .recomend-list{ width:1200px; a{ @extend %fl; margin-right: 30px; width: 260px; height: 440px; border: 2px solid transparent; @extend %borderbox; &:hover{ border-color: #109ef3; } } img{ width: 100%; height: 100%; } }…

Xib中设置控件的圆角、边框效果

设置控件的圆角和边框效果有两种方式: 1.代码实现: self.myView.layer.masksToBounds = YES; self.myView.layer.cornerRadius = ; 2.Xib设置: 运行,你会发现边框的颜色不显示??? 原因就是: 不知道你有没有注意到 layer.borderColor 对应值得类型:Color: 经常用代码进行边框设置的你,一定记得我们设置的颜色类型为: CGColor 解决办法: 只需要为 CALayer 创建一个分类就可以: #imp…

HTML+CSS之光标悬停图片翻转效果

设计思路: 首先做一个包括图片和说明文字的简单的页面结构,然后再设置它的变换.将变换的元素,即照片和文字放在一个父容器里面,这就需要四个父容器 ,再将这四个父容器放在最外层的舞台上面进行变换,在每个父容器里面都包括两部分:一个是上面的图片,还有一个是下面的说明文字.最后采用层定位将图片和下面的说明文字让它有一个叠加的效果.先显示这个图片,当鼠标悬停在上面的时候,由于做了3D变换,(即每幅图片翻转的效果是围绕Y轴翻转180度来进行的),那么后面的文字就会被显示出来. ㈠HTML主页…

纯CSS实现项目展示遮罩详情效果

本实例主要用于项目展示时鼠标hover后显示一个遮罩显示项目详情的效果,遮罩采用CSS的绝对定位以及CSS3盒子模型. 本实例应用广泛,很多品牌官方网站均有采用. hover: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>纯CSS实现项目展示遮罩详情效果</title> <link rel="shortcut icon&qu…

HTML 使用CSS 如何去掉文本聚焦框 HTML 使用CSS 如何去掉文本聚焦框 : outline 值设为none 修改input、textarea输入框placeholder样式

HTML 使用CSS 如何去掉文本聚焦框 : outline 值设为none 修改input.textarea输入框placeholder样式兼容性代码: input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color:lightgray; } input:-moz-placeholder, textarea:-moz-placeholder { …

CSS制作的32种图形效果[梯形|三角|椭圆|平行四边形|菱形|四分之一圆|旗帜]

转载链接:http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet 前面在<纯CSS制作的图形效果>一文中介绍了十六种CSS画各种不同图形的方法.今天花了点时间将这方面的制作成一份清单,方便大家急用时有地方可查.别的不多说了,直接看代码. 为了节省时间,下面图形都采用的一个标签,可以是块元素也可以是行内元素,不过行内元素需要加上“display:block;”,唯一不同的是,在此用了不同的类名来区别,相关类名我放在了标题的后面,以便大家对…

CSS属性定义文本修饰边框效果背景修饰

一.CSS属性定义1.css颜色表示方法[重点]rgb(红绿蓝3个颜色通道强度值为0-255)rgb(0,0,0)rgba(alpha a是透明度值为0-1)rgba(123,123,123,0) hslhsla(h:色相,色环上(ppt78页)的角度值,0-360 s:饱和度,0-100% l:明度,0-100% a:不透明度,0-1之间的小数)color:hsla(30,100%,50%,0.8); 十六进制(一般格式为#ffffff)(字母范围从A-F,数字从0-9 ) opacity…

css边框内圆角

一.使用两个元素实现 html <div class="parent"> <div class="inset-radius">时代峰峻胜利大街分类考试等级分类考试等级分类考试大家反馈来的时地方高度分工的发给对方间范德萨</div> </div> css .parent{ width: 200px; padding: 20px; background: #655; } .inset-radius{ border-radi…

HTML和CSS实现的透明登录框效果

实现代码 HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>透明登录框</title> <link rel="stylesheet" href="denglu.css"> </head> <body> <div…

CSS样式做圆角

我处理圆角的版本是由内置的绝对定位的四个div组成,每个div都有唯一的圆角图片作CSS Sprite操作.我们将会这样做: 是什么方式导致这项技术表现得这么了不起呢(What makes this technique cool)? 通过可变的宽度和高度处理毗邻的元素的能力.没有极限.(The ability to make rounded-bordered elements with fluid width and height. No limits whatsoever.)这项技术,正如我…

CSS图形——实现圆角

css实现圆角 css2.1给元素添加圆角是一件很麻烦的事,老办法是用背景图片实现,制作比较麻烦.css3,border-radius的属性,使圆角属性得到完美的解决. 语法 border-radius:长度值; 说明: 长度值可以是px.百分比.em等 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圆角实现<…

纯css手写圆角气泡对话框微信小程序和web都适用

嗯……我们设计师强烈要求一定要圆角!圆角的气泡对话框,不要那种尖角的.这其中还遇上了个尴尬的问题,z-index不生效无非就是两种方法,一种是使用图片再定位拼接起来使用,太简单了具体就不详细的说了.另一种方法就是border来写了,虽然怎么写都是尖角的,可是我想尝试一下.纯手写写出设计师想要的圆角吧什么是圆角的?什么是尖角的?以下图片可以对比出来: 这种是尖角: 这种是圆角: 尖角的方法网上一搜也是一大堆,其中有我最喜欢的阮大神的方法,阮大神博文在此(可点击):http://www.ruan…

利用animation和text-shadow纯CSS实现loading点点点的效果

经常在网上看到loading状态时的点点点的动态效果,自己也用JS写了一个,思路是使用一个计数参数,然后在需要添加点的元素后面利用setInterval一个一个加点,当计数到3时,把点变为一个--写完后我就觉得很不对劲,虽然JS代码也很简单,但是这么小的一件事还得拿JS搞这么多乱七八糟的? 然后去网上看到张鑫旭大神的一篇关于利用CSS实现loading状态时三个点的动态效果的文章,在评论区看到一位朋友的评论:利用text-shadow也可以实现打点效果,突然对这个很感兴趣,自己做来试试. 1.首…