CSS |形状渲染属性

shape-rendering属性用于提示渲染器在渲染圆形、矩形或路径等形状时必须做出的权衡。渲染器可以被告知使形状几何精确或优化形状以在某些情况下加速渲染。

句法：

shape-rendering: auto | optimizeSpeed | crispEdges | geometricPrecision | initial | inherit

属性值：

• auto：用于指示用户代理将自动做出平衡速度、边缘清晰或几何精度良好的决定。通常，良好的精度比速度和清晰的边缘更重要。这是默认值。

  例子：

  
  
  
    
    
  
  
    
  
      GeeksforGeeks
    
    
      CSS | shape-rendering
    
    
  
      
    
  
  
  

  输出：将crispEdges 值与自动值进行比较
  

• 优化速度：用于指示形状将以某种方式渲染，以强调几何精度或清晰边缘的速度。这可能会导致用户代理关闭所有形状的抗锯齿。

  例子：

  
  
  
    
    
  
  
    
  
      GeeksforGeeks
    
    
      CSS | shape-rendering
    
    
  
      
    
  
  
  

  输出：将 auto 值与 optimizeSpeed 值进行比较
  

• crispEdges：用于表示将在渲染形状时强调干净边缘的对比，而不是几何精度或速度。用户代理可以关闭形状的抗锯齿并调整线条位置和宽度以与设备的像素对齐。

  例子：

  
  
  
    
    
  
  
    
  
      GeeksforGeeks
    
    
      CSS | shape-rendering
    
    
  
      
    
  
  
  

  输出：将自动值与crispEdges 值进行比较
  

• geometryPrecision：用于表示形状将以几何精度渲染，而不是专注于速度或清晰的边缘。

  例子：

  
  
    
  
      
        
      
  
    
  
      
  
          GeeksforGeeks
      
        
      
          CSS | shape-rendering
      
        
      
  
          
      
  
    
  
  

  输出：将crispEdges 值与geometricPrecision 值进行比较
  

• initial：用于将属性设置为其默认值。

  例子：

  
  
        
  
    
      
    
  
    
  
    
  
      GeeksforGeeks
    
    
      CSS | shape-rendering
    
    
  
      
    
  
    
  
  

  输出：比较舍入值与初始值
  

• 继承：用于设置从其父元素继承的属性。

支持的浏览器： shape-rendering属性支持的浏览器如下：

• 铬合金
• 火狐
• 苹果浏览器
• 歌剧
• 浏览器 9