Przezroczysta granica CSS
W tym artykule utworzymy przezroczystą granicę w CSS, a zobaczymy, że obiekt za przezroczystą granicą jest widoczny. Zbadamy tutaj różne przykłady, aby zapewnić pełne zrozumienie przejrzystej koncepcji granicznej.
Przykład 1:
Otwórz nowy plik w kodzie Visual Studio. Po otwarciu tego pustego pliku wybierz język. Tutaj tworzymy kod HTML, więc wybieramy język HTML. Kiedy wybieramy ten język, plik utworzony tutaj jest plik HTML. Tak więc, kiedy zapisujemy ten plik, nie musimy wspominać o rozszerzeniu pliku. Następnie wpisz podstawowe tagi HTML lub umieść „!”, A następnie naciśnij„ Enter ”. Automatycznie otrzymasz wszystkie podstawowe tagi wymagane dla HTML.
Teraz łączymy ten plik do pliku CSS, który jest „przezroczysty.CSS ”. W ciele najpierw używamy znacznika nagłówka, aby wygenerować nagłówek. Następnie tworzymy dwa Divy o imionach „wewnętrznych” i „zewnętrznych”. Następnie ponownie umieszczamy nagłówek, który pojawia się w drugim divie. Teraz zamykamy te Divy tutaj. Tworzymy tutaj przejrzystą granicę, wykorzystując właściwość „graniczną” w CSS i ustawiamy kolor RGBA w tej nieruchomości granicznej.
Stosujemy kolor „bordowy” do nagłówków, które wcześniej stworzyliśmy. „Zewnętrzny” służy wspomnieniu o pierwszej klasie DIV i ustawiamy jej „szerokość” na „300px”. „Wysokość” tego pierwszego Div to „300px”, a „margines” tutaj to „10%”. Teraz, po tych wszystkich właściwościach, ustawiamy właściwość „granica” i ustawiamy jej wartość na wartość RGBA. Ustawiamy tutaj również wartość alfa, aby granica jest przezroczysty. Ustawiliśmy „granicę” na „szerokość 10px” i typu „solid”. RGBA, którą ustawiliśmy tutaj, to „RGBA (0, 0, 0, .4) ”gdzie„ RGB (0, 0, 0) ”jest używany do czarnego. Ale tutaj dodajemy wartość przezroczystości, która wynosi „0.4 ”. „Radiusz graniczny” jest ustawiony na „5px”, więc krawędzie granicy są nieco zakrzywione.
Teraz wspominamy również o drugiej nazwie Div tutaj jako „zewnętrznej”. I wykorzystujemy tutaj niektóre właściwości dla tego drugiego div. Musimy ustawić rozmiar tego drugiego div mniejszy niż pierwszy div. Więc ustawiamy jego „szerokość” i „wysokość” na „270px” dla każdego z nich. Jego „margines” to „auto”, a „margines” to „3%”. Ustawiamy „tło” jako „RGBA (0, 0, 0, 0.4) ”, taki sam jak granica pierwszego Diva. „Radiusz graniczny” tutaj jest także „5px”, a „wyściółka”, której używamy, to także „5px”.
Tutaj widać, że granica jest przezroczysta, ponieważ stosujemy niektóre wartości alfa w wartości RGBA granicy. Jeśli umieścimy jakiś obiekt za tą granicą, będzie to dla nas widoczne.
Przykład nr 2:
To jest nasz drugi przykład i po nagłówku tworzymy pusty kontener Div. Ustawiamy obraz w tej div i stosujemy przezroczystą granicę na obrazie za pomocą właściwości CSS.
Ustawiliśmy „kolor” na „H1” jako „bordowy”. Używamy tutaj pojemnika „Div” i ustawiamy jego „szerokość” na „300px” i jego „wysokość” na „300px”. Używamy również „pływaka” tutaj, aby unosić tę div na „lewy”. Ustawiamy „tło” tego div i ustawiamy „Mypicture.png ”jako tło tego div. Umieszczamy ścieżkę tego obrazu w „URL” i stawiamy ten „URL” jako wartość właściwości „tła”. Używamy właściwości „margines” i ustawiamy ją na „20px”. „Wyściółka” jest również ustawiona na „20px”. W przypadku „granicy” używamy wartości „szerokości” do „25px” typu „solidnego”. Ponieważ chcemy utworzyć przezroczystą obramowanie, musimy tutaj użyć koloru „RGBA”, w którym umieszczamy wartość alfa, aby utworzyć przejrzystą granicę. Wartość koloru RGBA to „RGBA (143, 9, 9, 0.5) ”. Pierwsze trzy wartości pokazują kolor czerwonego typu, ale tutaj 0.5 Stosuje pewien wpływ przejrzystości na tę granicę. Teraz, dla całego „ciała”, ustawiamy wartość właściwości „wyściółki” na „90px”.
Wyjście tutaj zawiera obraz. Możesz zauważyć granicę wokół tego obrazu. Ta granica jest przejrzysta, ponieważ widzimy obraz za granicą. W rogach obrazu widzimy, że kolor obrazu zanika, ponieważ mamy przezroczystą granicę wokół obrazu.
Przykład nr 3:
W tym HTML ponownie tworzymy tylko jeden div. Teraz, używając atrybutów CSS, umieszczamy obraz w tej div i stosujemy do niego przejrzystą granicę.
Najpierw musimy umieścić nazwę kontenera Div, który ustawiliśmy w kodzie HTML. Następnie wkładamy kręcone aparaty ortodontyczne. Wewnątrz tych kręconych aparatów ortodontycznych umieszczamy „tło”, które ustawia tło tego Div. Ustawiamy obraz w „URL”, a ten „URL” jest tutaj jako wartość właściwości „tła” CSS. W tym przykładzie używamy „granicy” i zwiększamy „szerokość” tej granicy. Ustawiliśmy jego „szerokość” na „50px”, a ta granica jest w formie „solidnej”. Używamy tutaj „RGBA”, które omówiliśmy w naszym poprzednim przykładzie. Ustawiamy wartość alfa jako „0.5 ”, który reprezentuje przezroczystość tego koloru granicznego. „Wysokość” tego „Div.Wrap ”to„ 300px ”, a„ szerokość ”to„ 500px ”, więc będzie wyglądać prostokątny. „Margines”, który tutaj ustawiliśmy, to „50px”.
Spójrz na następujące dane wyjściowe i zauważ granicę. Tutaj widać, że część obrazu obecna za granicą jest dla nas widoczna. Oznacza to, że granica ta jest przejrzysta. Możemy utworzyć tę przezroczystą granicę, ustawiając wartość alfa na granicy z kolorem RGBA.
Wniosek
Ten artykuł został przedstawiony tutaj, aby pomóc ci uchwycić właściwości CSS, które pozwalają nam utworzyć przejrzystą granicę w CSS. Ten samouczek dokładnie przekroczył ten temat. Pokazaliśmy tutaj trzy odrębne przykłady, w których zaprojektowaliśmy przezroczystą granicę, wykorzystując nieruchomość graniczną. Wykorzystaliśmy również wartości RGBA w tej nieruchomości granicznej, co zapewniło możliwość ustawienia wartości alfa, aby nasza granica była przezroczysta. Zdefiniowaliśmy również tę „przezroczystą granicę”, ponieważ jest to granica, z której widzieliśmy obiekt za nią. W tym artykule uwzględniliśmy wyniki wszystkich tych kodów i wyjaśniliśmy je w pełnych szczegółach. Mam nadzieję, że możesz stworzyć tę „przejrzystą granicę” w swoich projektach po uprzejmie przestrzeganiu tego artykułu.