Question

我正在尝试在圆形SVG图像周围添加边框（class =“ lock feature”）。当我创建.lock功能css元素时，“功能”文本保持白色，并且边框未出现在浏览器中。但是，当我将描述符/元素frm的“ .lock功能”更改为“ img”，然后为边框提供边框显示的属性时。有人可以帮忙吗？

<style>
    html,body{
      font-family: 'Open Sans',sans-serif;
      text-align: center;
    }

    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      
    }

    #page-wrapper {
      position: relative;
    }

    #header {
    position: fixed;
    top: 0;
    left: 0;
    height: 90px;
    background-color: rgba(0, 0,0,.5);
    width: 100%;
    }

       .logo {
    float: left;
    }

  #header-img {
    height:100%;
  }

    nav {
     position: relative;
     float: right;
     height: 10vh;
     margin: 35px 0px;
     height: 20px;
     margin-right: 25px;
      }
      @media(max-width:453px){
  #nav-bar {
    position: absolute;
    width: 100%;
    top: 100%;
    margin:0;
  }

  #nav-bar li {
    display:block;
    background-color: rgba(0,0,0,.5);
    padding: 5px;
   }

    }
    
    li {
      display: inline-block;
      list-style: none;
     }

    a {
      text-decoration: none;
      margin: 20px;
      color: white;
      }

      .container {
        width: 100%;
        margin-top: 200px;
      }

      .grid {
        display: flex;
        margin: 0 auto;
        width: 80%;
        margin-top: 40px;
        margin-bottom: 40px; 
        }

      .description {
        text-align: left;
        margin: auto 18px;
        width: 70vw;
       }

       h2 {
         margin-bottom: 11px;
       }

       .lock feature {
         border-style: 3px solid black;
  
       }

       

     
</style>

<!DOCTYPE type>
<html>
  <head>
    <meta charset="utf-8"> 
  </head>
  <body>
    <div id="page-wrapper">
     <header id="header">
      <div class="logo">
       <img id="header-img" src="http://image.discountsoff.com/dryKPIu3fpLUjodbv1n2Q2EWdkA=/logos/aersf.com.png">
        </div>

          <nav id="nav-bar">
            <ul>
              <li><a class="nav-link" href="#features">Features</a></li>
              <li><a class="nav-link" href="#products">Products</a></li>
              <li><a class="nav-link" href="#about us">About Us</a></li>
            </ul>
          </nav>
     </header>
      
        
        
        <div class="container">
          <section id="features">
            <div class="grid">
              <img class="lock feature" src="https://svgur.com/i/9VC.svg" alt ="features">
              <div class="description"><h2>Lock Feature</h2><p>Aer started in 2014 as a crowdfunding project that combined a gym bag and an office bag into one simplified design. That project has grown into a mission to simplify the way you carry so you can worry less about what's on your back and focus more on what's ahead. Whether you're traveling between the office and the gym, or from San Francisco to Tokyo, there's a bag in our collection that's perfectly suited for your journey.</p>
              </div>
            </div>    
         
            <div class="grid">
              <img class="zip feature" src="https://svgur.com/i/9Vu.svg" alt="full bag">
              <div class="description"><h2>Zip Feature</h2><p>The Active Collection is a line of modern gym/work bags designed for the city professional. Go from the office to the gym and everywhere in between.</p>
              </div>
            </div> 
        
            <div class="grid">
                <img class="lap top feature" src="https://svgur.com/i/9UJ.svg" alt="about us">
                <div class="description"><h2>Lap Top Feature</h2><p>Inspired by the city, we create minimalist bags that balance smart features with a clean, architectural style.</p>
                </div>
            </div>
          </section>      
        </div>

            
                
                
       
          
        
        
        
        <div class="container">
          <section id="products"></section>
          <iframe width="560" height="315" src="https://www.youtube.com/embed/qeFOYlHmyGE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        
        
        <div class="container">
          <section id="about us"></section>
        </div>
        
    </div>    
  </body>
</html>

Answer 1

请尝试以下样式：

<style>
    .lock.feature {
             border: 3px solid black;
             border-radius: 100%;
             overflow: hidden; 
           }
</style>

SVG图像边框样式属性未显示

1 个答案: