Question

我想在CSS中更改水平规则的粗细。我知道它可以在HTML中完成 -

<hr size="10">

但我听说deprecated上提到MDN here。在CSS中，我尝试使用height:1px，但它不会改变厚度。我希望<hr>行为0.5px厚。

我在Ubuntu上使用Firefox 3.6.11

Answer 1

为了保持一致性，请移除任何边框并使用<hr>厚度的高度。添加背景颜色将为<hr>设置指定高度和颜色的样式。

在样式表中：

hr {
    border: none;
    height: 1px;
    /* Set the hr color */
    color: #333; /* old IE */
    background-color: #333; /* Modern Browsers */
}

或者你拥有内联：

<hr style="height:1px;border:none;color:#333;background-color:#333;" />

更长的解释here

Answer 2

浏览器中的子像素渲染

Sub-pixel rendering很棘手。实际上，您无法期望显示器渲染小于像素的细线。但是可以提供子像素尺寸。根据浏览器的不同，它们的呈现方式不同请查看此John Resig的blog post。

基本上，如果您的显示器是LCD并且您正在绘制垂直线，则可以轻松绘制1/3像素线。如果您的背景为白色，请将线条颜色设为#f0f。对于眼睛，这条线将是像素宽度的1/3。虽然它会有一些颜色，但如果你放大显示器，你会发现只有整个像素的一个部分（由RGB组成）会变暗。这几乎是用于精细类型提示的技术，即ClearType。

但水平线只能是一个完整的像素高。这是LCD显示器的技术限制。 CRT更加复杂的是它们的三角形荧光粉（除非它们是aperture grille型，即索尼特丽珑）但这是一个不同的故事。

基本上提供子像素维度并期望它呈现这种方式与期望整数变量存储数量1.2034759349相同。如果您了解这是不可能的，您应该了解显示器无法呈现子像素尺寸。

跨浏览器安全风格

但混合的横向规则通常是使用颜色完成的。因此，如果您的背景为白色（#fff），则可以始终将HR 非常点亮。与#eee一样。

非常轻的水平规则的跨浏览器安全样式将是：

hr
{
    background-color: #eee;
    border: 0 none;
    color: #eee;
    height: 1px;
}

使用CSS文件而不是内嵌样式。它们为整个站点提供了一个中心定义，而不仅仅是一个特定的元素。它使可维护性更好。

Answer 3

我一直在寻找绘制1px线的最短路径，因为分离CSS的整个负载并不是最快或最短的解决方案。

高达HTML5，WAS是1px hr的缩短方式：＆lt; hr noshade＆gt; 但是.. ＆lt; hr＆gt;的noshade属性HTML5不支持。改为使用CSS。（以前使用的其他属性， size，width，align ）......

现在，这个非常棘手，但如果需要最简单的1px小时，效果很好：

变化1，黑色小时:(黑色的最佳解决方案）

<hr style="border-bottom: 0px">

输出：FF，Opera - 黑色/ Safari - 深灰色

变体2，灰色小时（最短！）：

<hr style="border-top: 0px">

输出：Opera - 深灰色/ FF - 灰色/ Safari - 浅灰色

<小时/> 变体3，根据需要着色：

<hr style="border: none; border-bottom: 1px solid red;">

输出：Opera / FF / Safari：1px红色。

Answer 4

高度属性已在html 5中弃用。我要做的是在hr周围创建一个边框并增加边框的厚度：hr style =“border：solid 2px black;”

Answer 5

我建议将HR本身设置为0px高，并使用其边框使其可见。我注意到，当您放大和缩小（Ctrl +鼠标滚轮）时，HR本身的厚度会发生变化，而当您设置边框时，它始终保持不变：

hr {
    height: 0px;
    border: none;
    border-top: 1px solid black;
}

Answer 6

这是一种解决方案，可解决1像素黑线没有边框或空白的问题

hr {background-color:black; border:none; height:1px; margin:0px;}

在Google Chrome浏览器中测试

我想我要添加这个，因为其他答案不包括：margin:0px;。

演示

hr {background-color:black; border:none; height:1px; margin:0px;}

<div style="border: 1px solid black; text-align:center;">
<div style="background-color:lightblue;"> ↑ container ↑ <br> <br> <br> ↓ hr ↓ </div>
<hr>
<div style="background-color:lightgreen;"> ↑ hr ↑ <br> <br> <br> ↓ container ↓ </div>
</div>

Answer 7

我在线上添加了不透明度，所以看起来更薄：

df[ order(rownames(df)) , ,drop=F]

Answer 8

我相信样式row标签的最佳成就如下：

Group

对于HTML代码，只需添加：#!/usr/bin/python import sys import pygame as p from random import randint #13-4 class Setting(): def __init__(self,width,height): self.w=width self.h=height self.screen=p.display.set_mode((self.w,self.h),p.RESIZABLE,0) self.speed = 1 p.display.set_caption("EXE 13-4") class Rain(p.sprite.Sprite): def __init__(self): super().__init__() pic=p.image.load("../image/rain.jpg").convert_alpha() self.image=p.transform.smoothscale(pic,(100,100)).convert_alpha() self.rect=self.image.get_rect() self.rect.x=(self.rect.width)/2 self.y=float(self.rect.y) def create(self,setting,rains): spacex=setting.w-2*self.rect.x numbers=int(spacex/(2*self.rect.x)) rows=int(setting.h/(4*self.rect.height)) for row in range(rows): for number in range(numbers): rain=Rain() rain.number=number rain.row=row rain.rect.x =rain.rect.x+rain.rect.width*number rain.y = rain.rect.y+2*rain.rect.height*row rain.rect.y =rain.y rains.add(rain) print(spacex) print(numbers) def check_edge(self,setting,rains): for rain in rains.sprites(): if rain.rect.y == setting.h: new_rain=Rain() new_rain.rect.x=new_rain.rect.x+rain.rect.width*rain.number new_rain.y =new_rain.rect.y+2*rain.rect.height*rain.row new_rain.rect.y=new_rain.y rains.remove(rain) rains.add(new_rain) def update(self,setting): self.y += setting.speed self.rect.y= self.y def blit(setting,rains): rains.update(setting) rains.draw(setting.screen) def game(): p.init() setting=Setting(1200,800) rain=Rain() rains=p.sprite.Group() rain.create(setting,rains) while True: for event in p.event.get(): if event.type == p.QUIT: sys.exit() elif event.type == p.KEYDOWN: if event.key == p.K_ESCAPE: sys.exit() setting.screen.fill((0,0,255)) rain.check_edge(setting,rains) Rain.blit(setting,rains) p.display.flip() game()。

Answer 9

我建议使用像

这样的结构

<style>
  .hr { height:0; border-top:1px solid _anycolor_; }
  .hr hr { display:none }
</style>

<div class="hr"><hr /></div>

我如何更改<hr />标签的厚度

9 个答案:

浏览器中的子像素渲染

跨浏览器安全风格