border | 易学教程

一个border引发的血案

阅读更多关于一个border引发的血案

如果你要用CSS去表达元素没有边框，你会怎么表达？是border:0呢？还是border:none呢？我听过很多人推荐使用border:none，因为其理由是客户端的渲染。乍听之下会觉得：嗯，有道理，又学到东西了呵…… 其实，很多时候，代码是死的，没有绝对的好与坏！在相对论面前，神马都是浮云…… 要想明白哪种写法最适合你当前的环境，那么就必须先了解这两种写法的含义及优缺点：一、border:0 含义：它代表着边框:大小为0 ，在浏览器解析后的结果是没有边框优点1：在写的时候，少写三个字母，这代表在写代码时，这种写法的效率更高优点2：比另外一种写法少了三个字节，这代表它在体积上更节约了，减低了服务端的负担缺点：浏览器在解析它的时候，会认为是（边框：其它的默认渲染依然存在，比如solid？比如red？仅是大小为0）二、border:none 含义：它代表着边框:没有，在浏览器解析后的结果，未必是所有元素都没有边框，试试input如何？优点1：浏览器在解析它的时候，会认为是（边框：什么也没有，不渲染任何样式），不同于border:0，它毕竟还是有渲染的，但border:none是彻底无视，所以当浏览器在看它border:none时，就选择了路过……！缺点：请参考border:0的优点那么读到了这里，你会不会这样理解？ border

How can I add an elliptical border to a JFrame

阅读更多关于 How can I add an elliptical border to a JFrame

问题 I have an undecorated JFrame in the shape of an ellipse, that I would like to add a border. I am hoping I don't have to implement the rootPane.paintComponent method, and that I can just do this by adding a border. Is this possible in Java 7 or 8? 回答1: In your implementation of paintComponent() , use setClip() with an Ellipse2D sized to match the image's width and height . private Ellipse2D.Double border = new Ellipse2D.Double(); … public void paintComponent(Graphics g) { super.paintComponent(

CSS样式表

阅读更多关于 CSS样式表

层叠样式表：CSS Cascading Style Sheet。V2.1 （3.0版本有些旧系统不支持）控制页面样式外观。一、样式表分三类： 1.内联样式表。——放在元素的开始标记中。——只对当前元素起作用。 <input name="txt" style="border:0px; border-bottom:1px solid black;" type="text" /> （solid意思是实线） 2.内嵌样式表。——放在页面的<head></head>中间。——可以对整个页面。 <head> ... <style type="text/css"> input { 　　border:0px; 　　border-bottom:1px solid red; } </style> </head> 3.外部样式表。——放在一个单独的.css样式表文件中。——可以对整个网站。 (1)外部样式表的定义 (2)外部样式表的调用新建一个css文件，用来放样式表，如果要在HTML文件中调用样式表，需要在HTML文件中点右键--css样式--附加样式表。一般用link连接方式二、样式表的选择器：内嵌、外部样式表的一般语法：选择器｛样式=值; 样式=值; 样式=值; .... ｝ 1.基本： (1)标签选择器：用标记名称来当选择器。 input{.....} div{...} span

CSS3盒模型

阅读更多关于 CSS3盒模型

默认情况下，元素的宽度和高度的计算方式如下： width+padding+border=元素的实际宽度 height+padding+border=元素的实际高度所以真实显示的宽度和高度会比设置的width和height更大。 .div1 { width: 300px; height: 100px; border: 1px solid blue; } .div2 { width: 300px; height: 100px; padding: 50px; border: 1px solid red; } 这两个div设置的宽度和高度一样，但真实显示的大小不一致，因为div2设置了内边距。 CSS3box-sizing属性可以设置一个元素的width和height中是否包含padding和border。属性值： content-box：默认值。padding和border不被包含在定义的width和height之内。对象的实际宽度/高度等于设置的width/height值加border、padding之和。 border-box：padding和border被包含在定义的width和height之内。对象的实际宽度/高度就等于设置的width/height值。 .div1 { width: 300px; height: 100px; border: 1px solid blue;

CSS矩形、三角形等

阅读更多关于 CSS矩形、三角形等

1、圆形 CSS代码如下：宽高一样，border-radius设为宽高的一半 #circle { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; } 2、椭圆 CSS代码如下：border-radius:水平半径/垂直半径 #oval { width: 200px; height: 100px; background: red; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; } 3、等边三角上三角CSS代码如下：设置border-bottom宽度实线颜色，左右border左右宽度为一半，实线透明。下三角、左三角、右三角可举一反三实现。 #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } 4、直角三角

前端学习（418）：京东制作页面26中间模块划分

阅读更多关于前端学习（418）：京东制作页面26中间模块划分

index.css /* 中间模块 */ .grid{height: 480px;} .grid-coll1{width: 190px;height: 100%;background-color: pink;} .grid-coll2{width: 790px;height: 100%;background-color: skyblue;margin-left:10px;} .grid-coll3{width: 190px;height: 100%;background-color:purple;} normalize.css /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ /* http://necolas.github.io/normalize.css/ */ /** * 1. Change the default font family in all browsers (opinionated). * 2. Correct the line height in all browsers. * 3. Prevent adjustments of font size after orientation changes in * IE on Windows Phone and

前端学习（419）：京东制作页面27左侧分类上

阅读更多关于前端学习（419）：京东制作页面27左侧分类上

index.css /* 中间模块 */ .grid{height: 480px;} .grid-coll1{width: 190px;height: 100%;background-color: pink;} .grid-coll1 ul{padding: 20px 0;} .grid-coll1 ul li{padding-left: 12px;} .grid-coll2{width: 790px;height: 100%;background-color: skyblue;margin-left:10px;} .grid-coll3{width: 190px;height: 100%;background-color:purple;} normalize.css /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ /* http://necolas.github.io/normalize.css/ */ /** * 1. Change the default font family in all browsers (opinionated). * 2. Correct the line height in all browsers. * 3. Prevent

初学Css笔记

阅读更多关于初学Css笔记

Css介绍层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 Css笔记字体相关属性： font (字体) color (颜色) font- (字体-加粗) font-size (字体-大小) font-weight (字体-类型) text-shadow (文本的阴影效果) line-height (行间的距离,行高) letter-spacing (字体间的距离) text-align (文本-水平对齐) direction (内容显示方向) 背景相关属性： Background (背景) background-attachment (固定到背景) background-color (背景-颜色) background-image (背景-图片) background-position (背景-图片-位置) background-repeat (背景-是否及如何重复背景图像) background-size (背景-大小) 边框相关属性： border (边框) border-color (边框-颜色) border-style (边框-样式) border

使用纯CSS实现圆角边框并完美兼容

阅读更多关于使用纯CSS实现圆角边框并完美兼容

纯CSS实现圆角框是一件大家都说烂了的事件，我也写过两篇总结文章，为什么还会有这篇文章呢，事情是这样的。在我们的以前的项目中，实现圆角框往往是用背景图片来实现的，但是，当这些项目发布上线后，在维护过程中，有时需要添加一些新的需求，因为以前的项目中大量采用了圆角图片，并且这些图片全部采用了CSS sprites方式合并的图，为了不增加更多的额外工作，并且也不想用JS来添加更多的http请求，所以需要一些简单的CSS方案来解决这个问题。而我的个人爱好，也喜欢采用无图片的方式来处理这些效果。总觉得CSS能完成的工作，为什么不让它来实现呢？实现原理：纯CSS方式实现圆角框的原理在网络上已经有很多人详细解说了，下面这个示意图是我将其中的一个圆角进行放大后的效果。图一从上面效果图中我们可以看到其实这种圆角框是靠一个个容器堆砌而成的，每一个容器的宽度不同，这个宽度是由margin外边距来实现的，如：margin:0 5px;就是左右两侧的外边距5像素，从上到下有5条线，其外边距分别为5px，3px，2px，1px，依次递减。因此根据这个原理我们可以实现简单的html结构和样式。 1、Html结构层： <div class="sharp color1"> <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4">

个人收藏的一些图片特效

阅读更多关于个人收藏的一些图片特效

第一个: Js模仿水波滑动效果图片轮显代码 < html > < head > < title > Js图片水波滑动效果 </ title > < style type ="text/css" > * { margin : 0 ; padding : 0 ; } body { margin : 5px auto ; background : #f0f0f0 ; } img { margin : 0 ; border : 0 ; padding : 0 ; } #jsF { position : relative ; margin : 0 ; width : 270px ; height : 185px ; overflow : hidden ; } #jsF ul { position : absolute ; top : 0 ; left : 0 ; list-style-type : none ; z-index : 1 ; } #jsF li { display : block ; position : absolute ; top : 0 ; margin : 0 ; padding : 0 ; overflow : hidden ; } </ style > </ head > < body > < div id ="jsF" ></ div > < div id =

订阅 border