border-radius原理

border-radius几种写法的原理剖析

border-radius:40px; border-radius:40px/20px; border-radius:40px 20px; border-radius:40px 20px 10px 5px; 今天主要是测试上面四种border-radius的写法. 首先是第一种. border-radius:40px; 这里设置了一个值,所以默认4个角都显示为半径40的圆角,蓝色方框为40像素宽的正方形.所以也就是相当于圆的半径. 第二种 border-radius:40px/20px; 这里除

重温CSS：Border属性

边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没发现这种技术之前,我们可能使用背景图像定位来显示一个园或箭头.幸运的是,我们能放下PS图象处理软件了. 基础你可能很熟悉边的最基本用法. 1 border: 1px solid black; 上面的代码将给元素应用1px的边.即简洁又简单:但我们也可以稍作修改. 1 2 3 border-widt

CSS3 基本知识

1.CSS3 简介 CSS 指层叠样式表 (Cascading Style Sheets),用于控制网页的样式和布局,CSS3 是最新的 CSS 标准. 在网页制作时采用层叠样式表,可以有效的对页面的布局.字体.颜色.背景和其他效果实现更加精确的控制,只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分.通过仅仅编辑一个简单的 CSS 文件,外部样式表有能力同时改变站点中所有页面的布局和外观. CSS3 语言开发是朝着模块化发展的.之前的规范作为一个模块很庞大而且比较复杂,所以 CSS

css3前端工具

随着CSS3的出现,CSS3讨论的话题越来越多了,现在各种教程也是多如牛毛,不比一年前的时候,找个资料要捞遍整个互联网,而且还很难找到自己需要的参考资料.从侧面也说明,CSS3对于前端工程师来说,越来越重要了,从各处的招聘信息也能看出这一点.说这么说我想强调的是他的重要性.另一方面,有很多CSS3的效果真的不需我们自己一个一个去写,在这种情况就互联网上有关于CSS3的工具就出现了,这些工具将给你的制作节省很多时间,让你有更多的时间去做自己想要做的事情. SVG Edit SVG EDIT是一款在

css3工具

随着CSS3的出现,CSS3讨论的话题越来越多了,现在各种教程也是多如牛毛,不比一年前的时候,找个资料要捞遍整个互联网,而且还很难找到自己需要的参考资料.从侧面也说明,CSS3对于前端工程师来说,越来越重要了,从各处的招聘信息也能看出这一点.说这么说我想强调的是他的重要性.另一方面,有很多CSS3的效果真的不需我们自己一个一个去写,在这种情况就互联网上有关于CSS3的工具就出现了,这些工具将给你的制作节省很多时间,让你有更多的时间去做自己想要做的事情.经过一年多的收集,我想有必要在w3cplus

js自定义滚动样式

<!DOCTYPE html> <html lang="en"> <head> <style type='text/css'> html{ overflow: hidden; } #scroll{ width: 800px; margin: 100px auto; padding: 10px 30px 10px 10px; border: 1px solid #ccc; border - radius: 4px; height: 500p

CSS布局设置

一盒模型盒模型在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型.我们在这里重点讲标准模型. 盒模型示意图盒模型的属性 width:内容的宽度 height: 内容的高度 padding:内边距,边框到内容的距离 border: 边框,就是指的盒子的宽度 margin:外边距,盒子边框到附近最近盒子的距离如果让你做一个宽高402*402的盒子,您如何来设计

微信小程序中如何实现分页下拉加载？（附源码）

转眼间坚持写教你微信小程序系列已经有十节系列课程了,每天的工作压力繁重,小女子也不知道自己还能坚持这样的系列教程多久.只希望每篇教程真的对大家有帮助.这节课我们要介绍的就是如何实现分页的下拉加载,我们先来看效果图 1 2 3 4 5 6 7 8 <view class="copyright"> <view class="copyright_item">CopyRight:All Right Reserved</view>

如何高效的阅读uni-app框架？（建议收藏）

作者 | Jeskson来源 | 达达前端小酒馆 uni-app的框架,配置:page.json,manifest.json,package.json,vue.config.js.脚本,应用程序,main.js.日志打印,定时器,生命周期,页面,页面通讯. pages.json文件时用来对uni-app进行全局配置的,它是用来写页面文件的路径,窗口样式,底部的tabbar等,类似于小程序中的app.json的页面管理.这里注意的是定位,在小程序中是在app.json的,而在uni-app中式在m

前端Tips#3 - 简写的 border-radius 100% 和 50% 是等效的

本文同步自 JSCON简时空 - 技术博客,点击阅读视频讲解视频地址文字讲解 1.先讲结论 border-radius 这个 css 属性大家应该使用得非常娴熟,现实中用到的场景基本都是四个圆角一致的情况. 比如实现一个圆形按钮,其中 border-radius 数值有些人写为 50%,有些人则写成 100%,不过你会发现两者效果是一样的: 测试 HTML 代码如下: <style> .circle-btn { color: white; width: 100px; height: 10

jquery/zepto 圣诞节雪花飞扬

下载地址: http://www.html5tricks.com/jquery-html5-christ-snow.html 演示地址: http://www.html5tricks.com/jquery-html5-christ-snow.html 个人的demo: 新建并且引用以下js文件: (function($){ $.snowfall = function(element, options){ var defaults = { flakeCount : 35, flakeColor :

为 Web 设计师准备的 20 款 CSS3 工具

1.CSS3 Generator 2. Border Radius 3. CSS3 Maker 4. CSS3 Transforms 5. CSS3 Drop shadow generator 6. Button Maker 7. Modernizr 8. CSS3 Cheat Sheet 9. CSS3 Menu 10. Rounded Corner Generator 11. Gradient Generator 12. Border Image Generator 13. Spritebo

jQuery实践——属性和css篇

属性: attr html:<div>demo1</div> jQuery:$("div").attr("id","demo1"); removeAttr: $("div").removeAttr("id"); prop: html:<input type="text" value="demo2"/> jQuery:$("

Designing for iOS: Graphics & Performance

http://robots.thoughtbot.com/designing-for-ios-graphics-performance [原文] In the previous article, we explored different techniques to customize the look and feel of UIButton, assigning to each a difficulty level based on the complexity of the Object

【css3】--四种气泡

在聊天的场景中,聊天内容需要用到气泡修饰,如下图.下面一一讲解. 图片式: 第一个样式是京东客服,气泡的圆角和钩子都是用了图片.使用了一个table组合成了一个圆角的框框.lm样式拼出了钩子. <div class="jimi_lists clearfix"> <div class="header_img jimi3 fl"></div> <table class="msg" cellspacing=&q

Quartz2D复习（一）--- 基础知识 / 绘制线段圆弧 / 图片水印 / 截图

1.Quartz 2D是一个二维绘图引擎,同时支持ios和Mac系统: Quart2D的API是纯C语言的,API来自于Core Graphics框架: 2.Quartz 2D可以绘制图形(线段/三角形/矩形/圆和弧).绘制文字.绘制和生成图片.读取/生成pdf.截图/裁剪图片.自定义UI控件等 3.对于界面复杂且个性化的UI,普通的UI控件无法实现,而Quartz2D技术却可以通过自定义UI控件来实现.其实,ios中大部分控件的内容都是通过Quart2D画出来的 4.图形上下文(Graphi

[css]需警惕CSS3属性的书写顺序

转载张鑫旭:http://www.zhangxinxu.com/wordpress/2010/09/%E9%9C%80%E8%AD%A6%E6%83%95css3%E5%B1%9E%E6%80%A7%E7%9A%84%E4%B9%A6%E5%86%99%E9%A1%BA%E5%BA%8F/ 一.不同书写顺序示例首先是比较聪明和值得推荐的写法: .not-a-square { -webkit-border-radius: 10px; -moz-border-radius: 10px; borde

为什么要使用sass

或许你已经听过一个叫作Sass的东东?可能你已经了解它,并且你能像大师一样写出一些函数? 对于不清楚我在讲什么的读者或者客户,你们可以想想web开发过程,你们的期望和站点用户的体验想要怎样的.无论如何,我都要给大家分享一下,为什么我认为Sass是一个很好的东西. 对于那些不熟悉web前端开发的人,Sass和CSS或许只是一些让人感觉凌乱的词语,但就是这些词语,对于幕后的开发过程是很重要! 优势总结易维护,更方便的定制对于一个大型或者稍微有规模的UI来说,如果需要替换下整体风格,或者是某个字体

CSS模版收集

Css Reset by Eric MeyerURL:http://www.ahrefmagazine.com/web-design/30-useful-css-snippets-for-developers html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn,

iOS图形处理和性能(转)

在之前的文章里,我们探讨了基于多种不同技术来实现自定义的UIButton,当然不同的技术所涉及到的代码复杂度和难度也不一样.但是我也有意提到了基于不同方法的实现所体现出的性能表现也不一一相同. [在屏幕背后的东西] 为了了解性能是如何受到影响的,我们需要进一步地观察iOS里图形实现背后的一些内容.下面这张图呈现了不同的frameworks和libraries之间的一些联系: 在最顶层的就是UIKit,一个在iOS中用来管理用户图形交互的Objc高级的框架,它由一系列的集合类构成,例如UIBu

针对css3特性浏览器兼容封装less

//--------------------------------------------------- // LESS Prefixer //--------------------------------------------------- // // All of the CSS3 fun, none of the prefixes! // // As a rule, you can use the CSS properties you // would expect just by

border-radius原理

热门专题